npm install ng-gorilla
This module requires @angular/material package to be installed
Let's display a file input component in your app and verify that everything works.
You need to import the GrlFileInputModule
that you want to display by adding the following lines to
your app.component.ts
file.
import {Component} from '@angular/core';
import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
import {GrlFileInputModule} from 'ng-gorilla/file-input';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
standalone: true,
imports: [ReactiveFormsModule, MatFormFieldModule, GrlFileInputModule, MatButtonModule]
})
export class AppComponent {
fileFormControl = new FormControl([], [Validators.required]);
}
Add the <grl-file-input>
tag to the app.component.html
like so:
<form class="example-form">
<mat-form-field class="example-file-input" appearance="outline">
<mat-label>Documents</mat-label>
<grl-file-input #fileInput
[multiple]="true"
[maxContentSize]="1048576"
[formControl]="fileFormControl"
placeholder="Upload you docs here"></grl-file-input>
<button type="button" matSuffix mat-flat-button color="primary" [grlFileInputButtonFor]="fileInput">Upload</button>
<mat-hint>You can upload multiple images</mat-hint>
@if (fileFormControl.hasError('maxContentSize')) {
<mat-error>The file size should not be more than {{1048576 | byteFormat}}</mat-error>
}
@if (fileFormControl.hasError('required')) {
<mat-error>This field is <strong>required</strong></mat-error>
}
</mat-form-field>
</form>
Run your local dev server:
ng serve
Then point your browser to http://localhost:4200
You should see the Ng Gorilla file input component on the page.