Angular Material File Input
npm install @angular-material-components/file-input
npm install --save @angular-material-components/file-input
`
Setup
`
import { NgxMatFileInputModule } from '@angular-material-components/file-input';
@NgModule({
...
imports: [
...
NgxMatFileInputModule
]
...
})
export class AppModule { }
`
@see src/app/demo-fileinput/demo-fileinput.module.ts
Using the component
$3
`
`
#### You can provide a custom icon by using the directive ngxMatFileInputIcon
`
[color]="color">
folder
`
#### You can use with all properties of MatFormField such as appearance variants, hint...
`
Hint
`
#### List of @Input
| @Input | Type | Default value | Description |
|--------------- |---------- |--------------- |---------------------------------------------------------------------- |
| disabled | boolean | null | If true, the file input is readonly. |
| multiple | boolean | false | If true, the file input allows the user to select more than one file. |
| accept | string | null | Limiting accepted file types (For example: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.) |
| color | ThemePalette | null | Theme color palette for the component. |
Theming
- @see @angular/material Using a pre-built theme
- Add the Material Design icon font to your index.html
`
``