Angular Material File Input for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x


Description

An Angular Material File Input.

DEMO

@see DEMO stackblitz

@see LIVE DEMO

!Alt Text

Choose the version corresponding to your Angular version:

Angular | @lautarobock/file-input
----------- | -------------------
16 | 16.x+
15 | 15.x+ OR 9.x+ for legacy import
14 | 8.x+
13 | 7.x+
12 | 6.x+
11 | 5.x+
10 | 4.x+
9 | 2.x+
8 | 2.x+
7 | 2.x+

Getting started

``
npm install --save @lautarobock/file-input
`

Setup

`
import { NgxMatFileInputModule } from '@lautarobock/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
`

``

License

MIT