---
slug: /angular
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Angular

[Angular][] components for Uppy UI plugins.

## When should I use it?

When you are using the Angular framework and you would like to use one of the UI
components.

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/angular
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/angular
```

  </TabItem>
</Tabs>

:::note

You also need to install the UI plugin you want to use. For instance,
`@uppy/dashboard`.

:::

## Use

Instead of adding a UI plugin to an Uppy instance with `.use()`, the Uppy
instance can be passed into components as a `props` prop.

The following plugins are available as Angular component wrappers:

- Import `UppyAngularDashboardModule` used as `<uppy-dashboard>` renders
  [`@uppy/dashboard`](/docs/dashboard)
- Import `UppyAngularDashboardModalModule` used as `<uppy-dashboard-modal>`
  renders [`@uppy/dashboard`](/docs/dashboard) as a modal
- Import `UppyAngularProgressBarModule` used as `<uppy-progress-bar>` renders
  [`@uppy/progress-bar`](/docs/progress-bar)
- Import `UppyAngularStatusBarModule` used as `<uppy-status-bar>` renders
  [`@uppy/status-bar`](/docs/status-bar)
- Import `UppyAngularDragDropModule` used as `<uppy-drag-drop>` renders
  [`@uppy/drag-drop`](/docs/drag-drop)

Each component takes a `props` prop that will be passed to the UI Plugin.

```typescript title="app.module.ts" showLineNumbers
import { NgModule } from '@angular/core';
import { UppyAngularDashboardModule } from '@uppy/angular';

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, UppyAngularDashboardModule],
	providers: [],
	bootstrap: [AppComponent],
})
class {}
```

```html title="app.component.html" showLineNumbers
<uppy-dashboard [uppy]="uppy"> </uppy-dashboard>
```

You should initialize Uppy as a property of your component.

```typescript title="app.component.ts" showLineNumbers
import { Component } from '@angular/core';
import { Uppy } from '@uppy/core';

@Component({
	selector: 'app-root',
})
export class AppComponent {
	uppy: Uppy = new Uppy({ debug: true, autoProceed: true });
}
```

### CSS

All components have their own styling and should be added to your component
decorator. You can find the CSS import statements in the docs of the UI plugin
you want to use. For instance, for `@uppy/dashboard`:

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
//...
@Component({
  // ...
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/dashboard/dist/style.css',
  ],
})
```

[angular]: https://angular.io