8.0.0 • Published 3 months ago

@angular-material-components/file-input v8.0.0

Weekly downloads
3,544
License
MIT
Repository
github
Last release
3 months ago

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.

DEMO

@see DEMO stackblitz

@see LIVE DEMO

Alt Text

Choose the version corresponding to your Angular version:

Angular@angular-material-components/file-input
148.x+
137.x+
126.x+
115.x+
104.x+
92.x+
82.x+
72.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)

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

You can provide a custom icon by using the directive ngxMatFileInputIcon

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

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

<mat-form-field appearance="outline">
  <ngx-mat-file-input [formControl]="file3Control">
  </ngx-mat-file-input>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

List of @Input

@InputTypeDefault valueDescription
disabledbooleannullIf true, the file input is readonly.
multiplebooleanfalseIf true, the file input allows the user to select more than one file.
acceptstringnullLimiting accepted file types (For example: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.)
colorThemePalettenullTheme color palette for the component.

Theming

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

License

MIT

8.0.0

3 months ago

7.0.0

11 months ago

7.0.1

10 months ago

6.0.0

1 year ago

5.0.1

2 years ago

4.0.2

2 years ago

5.0.0

2 years ago

5.0.0-beta.1

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.0-beta.1

2 years ago

2.0.0

3 years ago

1.0.0

3 years ago