ngx-material-file-input - Shell-Bash

ngx-material-file-input is an Angular library which provides a customizable Material Design file input component. It allows users to upload files and provides visual feedback by displaying the selected files and their names.

In Shell-Bash, you can easily install ngx-material-file-input in your Angular project by running the following command:

npm install ngx-material-file-input --save

Next, import the NgxMaterialFileInputModule in your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NgxMaterialFileInputModule } from 'ngx-material-file-input';

@NgModule({
  imports: [BrowserModule, FormsModule, NgxMaterialFileInputModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now, you can use the ngx-mat-file-input component in your HTML templates:

<ngx-mat-file-input formControlName="file" accept=".csv,.xls,.xlsx"></ngx-mat-file-input>

Here, we have used the formControlName property to bind the selected file to a form control. The accept attribute specifies the file types that can be selected.

You can also customize the appearance of the component by setting the ngxMatFileInputPlaceholder and ngxMatFileInputButtonText properties:

<ngx-mat-file-input formControlName="file" accept=".csv,.xls,.xlsx"
  [ngxMatFileInputPlaceholder]="'Choose a file...'"
  [ngxMatFileInputButtonText]="'Browse'">
</ngx-mat-file-input>

In addition, you can listen to the change event to perform actions when a file is selected:

<ngx-mat-file-input formControlName="file" accept=".csv,.xls,.xlsx"
  (change)="onFileSelect($event)">
</ngx-mat-file-input>

export class AppComponent {
  onFileSelect(event: any) {
    console.log(event.target.files);
  }
}

Overall, ngx-material-file-input is a useful library for implementing a customizable Material Design file input component in your Angular application. With its simple installation process and customizable options, it makes adding file upload functionality a breeze.