mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-18 17:16:00 +00:00
108 lines
2.4 KiB
Text
108 lines
2.4 KiB
Text
---
|
|
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 wouldl like to use on 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:
|
|
|
|
- `<uppy-dashboard />` renders [`@uppy/dashboard`](/docs/dashboard)
|
|
- `<uppy-drag-drop />` renders [`@uppy/drag-drop`](/docs/drag-drop)
|
|
- `<uppy-progress-bar />` renders [`@uppy/progress-bar`](/docs/progress-bar)
|
|
- `<uppy-status-bar />` renders [`@uppy/status-bar`](/docs/status-bar)
|
|
|
|
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
|
|
@Component({
|
|
// ...
|
|
styleUrls: [
|
|
'../node_modules/@uppy/core/dist/style.css',
|
|
'../node_modules/@uppy/dashboard/dist/style.css',
|
|
],
|
|
})
|
|
```
|
|
|
|
[angular]: https://angular.io
|