@angular-material-components/file-input
TypeScript icon, indicating that this package has built-in type declarations

16.0.1 • Public • Published

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

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
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 @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

@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

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

License

MIT

Package Sidebar

Install

npm i @angular-material-components/file-input

Weekly Downloads

3,224

Version

16.0.1

License

MIT

Unpacked Size

150 kB

Total Files

24

Last publish

Collaborators

  • h2qutc