No Partying Mariachis

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

    7.0.1 • Public • Published

    Angular Material File Input for @angular/material 7.x, 8.x, 9.x, 10.x, 11.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
    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

    Install

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

    DownloadsWeekly Downloads

    5,722

    Version

    7.0.1

    License

    MIT

    Unpacked Size

    142 kB

    Total Files

    24

    Last publish

    Collaborators

    • h2qutc