@angular-material-components/file-input

Angular Material File Input

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@angular-material-components/file-input
2341758.0.03 months ago2 years agoMinified + gzip package size for @angular-material-components/file-input in KB

Readme

Angular Material File Input for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x
Build Status License npm version

Description

An Angular Material File Input. Buy Me A Coffee

DEMO

@see DEMO stackblitz @see LIVE DEMO Alt Text Choose the version corresponding to your Angular version: Angular | @angular-material-components/file-input ----------- | ------------------- 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 @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

File Input (ngx-mat-file-input)

```
<ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept" [color]="color">
</ngx-mat-file-input>
```

You can provide a custom icon by using the directive ngxMatFileInputIcon

```
<ngx-mat-file-input [formControl]="fileControl" [multiple]="multiple" [accept]="accept"
[color]="color">
<mat-icon ngxMatFileInputIcon>folder</mat-icon>
</ngx-mat-file-input>
```

You can use with all properties of MatFormField such as appearance variants, hint...

``` formControl="file3Control"> 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

  • Add the Material Design icon font to your index.html
``` ```

License

MIT