h2qutc / angular-material-components Goto Github PK

The UI breaks for mobile. I have opened your demo/documentation page on iPhone 5 and that's how it looks like for me:
touchUi is false
touchUi is true
Does this component support mobile and I just didn't set it up properly or not. If it does not support mobile, are you going to add this support?

Hi, on our application we got a date component that may or may not display and parse time. Because of this setting, we start using this datetime component. We also have some specific date formats that can have time or only date.

I successfully used a date-adapter to format the input, using locale and stuff, and everything is working. Except that since the component is the same, we are using the same FORMATS const. So, my question is, how do I know if the component is using a timepicker input value true or false?

I tried to use different formats, including the default ones, but nothing changed.

I started a stackblitz to demonstrate the problem:
https://stackblitz.com/edit/angular-g2j7kw

We got a timePicker Input, and bot components are using the format() on date-adapter.ts, I just dont know how to consider the timepicker option (or hideTime from the component), to format it with or without time.

Any advices or suggestions? Thanks :)

Code (from example):

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
</mat-form-field>

Error:
Type 'NgxMatDatetimePicker' is not assignable to type 'MatDatepicker'.

Can you add an attribute to show/hide timepicker on request?

Hi,

For a date with format dd/mm/yyyy If I type only the day, field will be automatically filled with current values.
For example if I type '02', field will be filled with 02/06/2020.
Is it possible to disable the autocompletion and only mark the field as in error (cause 02 doesn"t match the date format).

Many thx

On opening this picker, it is located in the bottom left corner with a margin of ~3px. When chaning the month to a "longer one" (additional row of dates) the close and apply button are pushed down and then are out of screen.

How can i apply my styling to the overlay of this picker to relocate it?
My idea was to

::ng-deep .mat-datepicker-popup {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

but the styling doesn't get applied. The CSS itself is fine. If i manually add it in de dev tools, i get the desired behaviour to locate the popoup in the middle of the screen.

Also is there a way to add a black background with opacity to the popup? Like the normal mat datepicker, filling the whole screen.

People are stuck having to 'choose' a date, a dialog like that should always have a cancel button.

What happens:
The datetime-picker requires Material Icons web font. This does not work well when the project uses SVG icons exclusively or when icons are not from the Material set, like Font Awesome. The complete Material font adds extra unnecessary bytes to transfer. The most reasonable solution I found was to generate a custom subset of Material Icons font.

Suggested behavior:
A smoother way to handle such cases, a binding for optional icon templates would have been perfect, similar to what file input component does. Another option might be to bundle the SVG icons or font subset with the package so it does not require the web font at all.

Hello,
Thanks for this lib.
I try to set a default time when selecting a datetime.
My use case is to set time at 00:00:00 when the user click on the button to select datetime. The user can change this default value if he want.

Thanks a lot

On picture one I use native date picker, as you can see theme is considered -> I just opened it..
on picture two I first opened datetime picker, then native date picker, both styles are wrong -> datetime picker overwrites also the style of native date picker.

Allow us to disable input/change in the minute and seconds in time picker.

Use case: I have hourly KPIs, so I only wanted users to be able to search for a date with round hours.
I can do that manipulating the value after the it is changed but this is not the optimum UX.

Thanks

Would it be feasible to add as Angular @input, a default time (for example 0:00) instead of having it filled with current time when opening the popup for the first time?

                <mat-form-field fxFlex="33" dateTimeFormat>
                    <mat-label>{{'comp.appointmentSearch.appointmentFrom' | translate}}</mat-label>
                    <input id="start" name="start" [(ngModel)]="appointment.start" placeholder="DD.MM.YYYY, HH:mm" matInput [ngxMatDatetimePicker]="startPicker">
                    <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
                    <ngx-mat-datetime-picker [showSeconds]="true" #startPicker></ngx-mat-datetime-picker>
                    <mat-error>{{getTranslatedError('start') | async}}</mat-error>
                </mat-form-field>

Thanks for your great component.

Hi, I was trying to use this picker but I got stuck several times through the tutorial. So I thought thay It would be worth explaining the problems I encountered to improve the documentation for future developers 😄.

Documentation thay I used: https://h2qutc.github.io/angular-material-components/datetimepicker

1. This code snippet uses CUSTOM_MOMENT_FORMATS but it's not explained where does it come from.

// If using Moment
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: "l, LTS"
  },
  display: {
    dateInput: "l, LTS",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

//and in the module providers 
providers: [
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS }
  ]

I thought that maybe there were already made constants for different formats and locales, but I didn't know where to get them from, I even checked the Moment.js documentation.
Then I thought that maybe I could write the format I wanted, but no:

    { provide: NGX_MAT_DATE_FORMATS, useValue: 'L LT'}

Then I realized that I had to use the variable declared adobe CUSTOM_DATE_FORMATS. So the providers line should be:

    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS}

This is totally confusing.

2. here's no reference to an explanation of what attributed can NgxMatDateFormats have and what does each one. For example, I wanted to change the default locale format of es-ES as is, without any custom format, but I don't know hot to do it.

3. It's unclear that part refers to NgxMatDateAdapter and what to NgxMatMomentModule. I sugest adding subtitles for each aproach. Smething like:

• Change the date format
  • Using NgxMatNativeDateModule
  • Using NgxMatDateAdapter
  • Using NgxMatMomentModule

4. I was expecting to set the format through a simple @input property like format="DD/MM/YYYY HH:mm" or locale="es-ES", instead of doing all of this.

Since Version 2.0.3, when the value is preset via the model and an ngModel binding, awhen I open the datetimepicker the time component is not visibile. As soon as I choose a date, it appears again. It was working with Version 2.0.1
Thks

Hello, new Angular user here and thank you for your excellent work.

When I ran ng update, there is a a failure on peer dependencies. I do not know whether it is a issue because nothing wrong happened after I ran ng update --force.

$ ng update @angular/material @angular/core @angular/cli @angular/cdk
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Using package manager: 'yarn'
Collecting installed dependencies...
Found 38 dependencies.
Fetching dependency metadata from registry...
                  Package "@angular-material-components/datetime-picker" has an incompatible peer dependency to "@angular/cdk" (requires "0.0.0-PLACEHOLDER", would install "9.1.3").
                  Package "@angular-material-components/datetime-picker" has an incompatible peer dependency to "@angular/core" (requires "0.0.0-NG" (extended), would install "9.0.7").
                  Package "@angular-material-components/datetime-picker" has an incompatible peer dependency to "@angular/material" (requires "0.0.0-PLACEHOLDER", would install "9.1.3").
                  Package "@angular-material-components/datetime-picker" has an incompatible peer dependency to "@angular/forms" (requires "0.0.0-NG" (extended), would install "9.0.7").
                  Package "@angular-material-components/datetime-picker" has an incompatible peer dependency to "@angular/common" (requires "0.0.0-NG" (extended), would install "9.0.7").
                  Package "@angular-material-components/datetime-picker" has an incompatible peer dependency to "@angular/platform-browser" (requires "0.0.0-NG" (extended), would install "9.0.7").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "/tmp/ng-8YLn3B/angular-errors.log" for further details.

Disabled not works properly even with your provided demo app at: stackblitz for angular7/8.

[disabled] should disable the whole component if you designed otherwise it's okay, but!
if you set disabled="true" or [disabled]="true" in the template it's not working. Only when you toggle with the radio btns below.
I've tried to set up a variable to bind these values to, but i got the same issue.

I am trying to insert the component to replace a datepicker that already contained a saved time.
Setting the time with the moment package and entering the value at the input.

Angular 8
"@angular-material-components/datetime-picker": "^2.0.4",

After implementing the datepicker, the current time is not displaying, am I missing something?

The current behavior of the component is that the input field can be edited by the user, and is not validated at all.
I don't want the user to fill this field manually but use a calendar widget. I've tried to use ViewChild to trigger the open() of the NgxMatDatetimePicker class, but it doesn't work.

Is it possible to trigger the calendar from the outside (e.g. input click)?

Hi there, I need to send the UTC time while displaying the local time for the user, any ideas on how to do it proper and simple?

Regards,
Piotr

Is there any possibility to set the locale used by the datetime picker or set it to utc?

I provide a time in utc but it gets converted to locale timezone which should not happen.

When the package is installed, it shows following warnings:

warning " > @angular-material-components/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning " > @angular-material-components/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning " > @angular-material-components/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning " > @angular-material-components/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning " > @angular-material-components/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning " > @angular-material-components/[email protected]" has incorrect peer dependency "@angular/[email protected]".
warning " > @angular-material-components/[email protected]" has incorrect peer dependency "[email protected]".

I have used the date time picker in a material form field with out toggle button. The calendar is invoked by click and focus event on input entry field.
The calendar works properly in chrome while click on input but it does not works properly in firefox.
In firefox the calendar appears for a moment and disappear.

I'm trying to customize calendar header (getting rid of year view and switching directly to multi-year view from month view) using[calendarHeaderComponent] property:

<ngx-mat-datetime-picker #fromCalendar [calendarHeaderComponent]="calendarHeader" [showSpinners]="fromCalendarConfig.showSpinners" [showSeconds]="fromCalendarConfig.showSeconds"
                  [stepHour]="fromCalendarConfig.stepHour" [stepMinute]="fromCalendarConfig.stepMinute" [touchUi]="fromCalendarConfig.touchUi"
                  [color]="fromCalendarConfig.color" [enableMeridian]="fromCalendarConfig.enableMeridian">
                </ngx-mat-datetime-picker>

calendarHeader component looks really similar to the one described in the official documentation https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header

Unfortunately MatCalendar from my constructor inside calendarHeader component is undefined
What am I doing wrong? Is customizing header in case of ngx-mat-datetime-picker impossible?

I played with this for quite some time. I eventually got rid of all the errors, but never got anything to appear in place or around the input. The demo here on github has a great deal that is missing from the home page. A simple implementation would have been nice. Moving on to something better documented.

with angular 9, min and max attributes are not working

was able to replicate this on the stackblitz link provided in the repo

https://stackblitz.com/edit/demo-ngx-mat-datetime-picker-angular9

Been up since 4am because I can't sleep at the moment. Wanted a Date Time Picker, and eventually discovered yours. This is exactly what I wanted to get an idea out of my head.

Thanks once again, as it was driving me nuts that I could not find a solution that looked and worked like yours.

When I use ngModel into input or setValue from control, color Picker doesnt work good

Hello, I'm trying to close datepicker windows while switching between active form rows on custom event without success Maybe someone could help me.
HTML:

<mat-form-field>
    <input class="datePicker startDate" name="startDate" matInput
        [ngxMatDatetimePicker]="startDate" placeholder="" formControlName="startDate"
        (dateChange)="changeDate('startDate', $event, reservationIndex)" [min]="minDate"
        [max]="maxDate" [readonly]="true" (click)="startDate.open()">
    <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #startDate [disableSecond]="true"></ngx-mat-datetime-picker>
    <mat-error>
        <div class="validation-error"
            *ngIf="!startDateControl(reservationIndex).valid && startDateControl(reservationIndex).touched">
            Błędny czas rozpoczęcia</div>
        <div *ngIf="selectedRowIndex === reservationIndex">
            <div class="validation-errors"
                *ngFor="let error of errorAPIError; let i=index">
                <div *ngFor="let field of error.fields; let iF=index">
                    <div *ngIf="field === 'startDate'">
                        <span>API: {{error.message}}</span>
                    </div>
                </div>
            </div>
        </div>
    </mat-error>
</mat-form-field>

form.component.ts:

@ViewChild('startDate',{static: false}) public startDatePicker: MatDatepicker<any>;
@ViewChild('endDate',{static: false}) public endDatePicker: MatDatepicker<any>;

switchRowIndex(index: number) {
this.startDatePicker.close();
this.endDatePicker.close();
}

Regards

npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular-material-components/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.

Hello,
We are using angular-material-components and the datetime picker component doesn't have 'Open Calendar on focus Input). Can you help me solve this issue?
Thanks.

I have installed and imported the NgxMatMomentModule, but how do I change the date format used in the component?

Thank you

After implementing the date time picker. The time picker is not being rendered properly: Anything I can do to resolve this?

Please make NgxMatCalendar part of public-api so we can create proper custom CalendarHeader.

Material's MatDatepicker expose Calendar so we can easily create custom header
https://github.com/angular/components/blob/master/src/material/datepicker/public-api.ts#L10

Using the Demo

1. Enable Meridan -> True
2. Set time to 12:06 PM
3. Reopen the date time picker and it shows AM instead of PM.
   
4. Clicking Am does change it to PM but sets the hour to 00 yet it is supposed to stay at 12

When i use the ngx-mat-datetime-picker to fix time at 00:00:00, the input will display 24:00:00.

Everything is working fine but selected time is not being shown in UI input field. I have followed all the steps as per docs.

default value of form control is:

this.todaysDate =  moment().utc().utcOffset(this._timeZone);

this.discountForm = this._fb.group({
  startDate: [this.todaysDate, [Validators.required]],
})

In version 2.02 when we remove form control or use ngModel binding input immediately louse time presentation and seconds in dialog are no visible anymore.

We can see that in demo example if we remove form control from view binding.
https://stackblitz.com/edit/demo-ngx-mat-datetime-picker?file=src%2Fapp%2Fapp.component.html

Hello !
I use this custom definition of date format to provide MAT_DATE_FORMATS :

export const MY_CUSTOM_MOMENT_FORMATS = {
    parse: {
        dateInput: 'L LT'
    }, 
    display: {
        dateInput: 'L LT',
        monthYearLabel: 'MMMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM-YYYY',
    }
}

but since the new update 2.0.3 the date display in my inputs is : hh:mm:ss !
I don't use the LTS for the dateInput in my custom format but LTi shouldn't have the seconds display in my input (was working well in the 2.0.1 version)

edit: i've notice that the L is not taking account correctly for display as L but as l today we're the 01/04/2020 and the display is 1/4/2020 :/

Thanks for your help :)
If more informations are needed i'll be glad to provide them

Versions use and work fine :
"@angular-material-components/datetime-picker": "2.0.2",
"@angular-material-components/moment-adapter": "2.0.1"

Versions causing error :
"@angular-material-components/datetime-picker": "2.0.3",
"@angular-material-components/moment-adapter": "2.0.2",

Does anybody solve this problem?

ERROR in node_modules/@angular-material-components/datetime-picker/lib/calendar.d.ts(10,10): error TS2305: Module '".../node_modules/@angular/material/datepicker"' has no exported member 'MatCalendarCellCssClasses'.

import {
  NgxMatDatetimePickerModule,
  NgxMatNativeDateModule,
  NgxMatTimepickerModule
} from '@angular-material-components/datetime-picker';

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatChipsModule,
  MAT_DATE_LOCALE,
  MAT_DATE_FORMATS,
  DateAdapter
} from '@angular/material';

@NgModule({
  imports: [
    NgxMatDatetimePickerModule,
    NgxMatNativeDateModule,
    NgxMatTimepickerModule,
    MatAutocompleteModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
    MatChipsModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatGridListModule,
    MatSnackBarModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatTabsModule,
    MatStepperModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatDialogModule,
    MatTableModule,
    CdkTableModule,
    MatCardModule,
    MatExpansionModule,
    MatSlideToggleModule,
    MatSelectModule,
    MatPaginatorModule,
    MatSortModule,
    NgxMatSelectSearchModule
  ],

Hi,

I have a date field in a form :

<form #form="ngForm" [formGroup]="filterGroup">
        <mat-form-field >
            <input matInput
                [ngxMatDatetimePicker]="pickerStart"
                formControlName="start">
            <mat-datepicker-toggle
                matSuffix
                [for]="pickerStart"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #pickerStart
                [showSeconds]="false">
            </ngx-mat-datetime-picker>
        </mat-form-field>
</form>

In my controller I have :

 filterGroup: FormGroup;
...
 this.filterGroup = this.fb.group({
      start: new FormControl(''),
    });

...
 this.filterGroup.valueChanges.subscribe(form => {
      console.info(form.start);
});

And in app.module.ts :

 export const DATETIME_FORMATS = {
  parse: {
    dateInput: 'l, L, LTS',
  },
  display: {
    dateInput: 'DD/MM/YY HH:mm',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM-YYYY',
  },
};

...
providers: [
        { provide: LOCALE_ID, useValue: 'fr' },
        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
        { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
        { provide: NGX_MAT_DATE_FORMATS, useValue: DATETIME_FORMATS }
      ]

If I pick a date with the datePicker modale, everything is working and I can see the date is well formated, and console.info shows that form.start contains a Moment object with correct date and time.

If I type a date like 06/06/20 10:20, field is marked as in error, and console.info(form.start) shows null.

If I try to comment line
{ provide: NGX_MAT_DATE_FORMATS, useValue: DATETIME_FORMATS }
and type a date like 06/06/2020 10:20:10, now field is no more in error, and console.info shows Moment object with correct date and time.

Also I can see that if we type "10/08/20 09" -> not typing full time, just the hour but not minuts, and then focus out the field, date becomes : 08/09/20 00:00 -> Day and Month have been changed although this is not what we want.
Also it would be great to disable the autocomplete. I've tried with :

  onFocusOut(event: Event): void {
    event.preventDefault();
    event.stopPropagation();
  }

But it does'nt work.

Here a stackblitz from your demo :

https://stackblitz.com/edit/demo-ngx-mat-datetime-picker-uroqhm?file=src%2Fapp%2Fapp.module.ts

Another bug that I found is that if you set a min/max date, and then you type a date which doesn't match the min/max, on focusOut the date is replaced by a random one. For example if you set max date to 23/06/20 à 11:15, you pick a date with datePicker (23/06/20 for instance), then you type in the field 28 instead of 23, on focusOut the date becomes : 06/05/20 00:00. You can also see this one from the stackblitz above.

Thx

I have 2 UTC stamps coming from backend.
I'd like to set up some values as default.

I am using reactive forms.
When I open the dialog that hold the tamplate, no dafault value is set.
Console error says:

ERROR TypeError: date.getHours is not a function
at NgxMatNativeDateAdapter.getHour (angular-material-components-datetime-picker.js:3617)
at NgxMatTimepickerComponent._updateHourMinuteSecond (angular-material-components-datetime-picker.js:1845)
at NgxMatTimepickerComponent.writeValue (angular-material-components-datetime-picker.js:1783)
at setUpControl (forms.js:2603)
at FormGroupDirective.addControl (forms.js:6359)
at FormControlName._setUpControl (forms.js:7010)
at FormControlName.ngOnChanges (forms.js:6933)
at checkAndUpdateDirectiveInline (core.js:27784)
at checkAndUpdateNodeInline (core.js:38472)
at checkAndUpdateNode (core.js:38411)

Each time I try to manually set up the time it logs this error to the console.

control setup:

 this.newForm = new FormGroup({
      startOfDay: new FormControl({ value: this.getDefaultTimeForTimepicker() }, Validators.required),
... // other controls
});

private getDefaultTimeForTimepicker() {
    let dateArr = [];
    const endOfDay= new Date(this.data.endOfDay);
    endOfDay.setMinutes(endOfDay.getMinutes() + 1);
    dateArr = [endOfDay.getHours(), endOfDay.getMinutes(), endOfDay.getSeconds()];
    return dateArr;
  }

Template:

<form id="newForm" [formGroup]="newForm">
  <div class='row'>
    <div class="column">
      <ngx-mat-timepicker formControlName="startOfDay"></ngx-mat-timepicker>
      <mat-error>
        <ng-container *ngIf="newForm.hasError('required', 'startOfDay')">
          {{ 'required-field' | translate }}
        </ng-container>
      </mat-error>
    </div>
... // other fields
</div
</form>

An example setup with reactive forms for timepicker would be helpful as well.
Thanks

In the current scenario, we can validate the date by min and max property. When I pass the min date as the current date but still, I can select the previous time. I want that if the user chooses the current date then the user could not choose the previous time.

As I attached an image you can see in this image I had the disabled date before the current date but I am unable to disable the time before the current time.

Hi,
In standard datepicker, there is an option to open a calandar using e.g button:
https://material.angular.io/components/datepicker/overview#manually-opening-and-closing-the-calendar

I cannot recreate same approach using DateTimepicker, is it possible to open calendar in that way?

ERROR in node_modules/@angular-material-components/file-input/lib/file-input.component.d.ts:6:10 - error TS2305: Module '"C:/[...]/app/node_modules/@ angular/material/input"' has no exported member '_MatInputMixinBase'.

import { _MatInputMixinBase } from '@angular/material/input';

node_modules/@angular-material-components/file-input/lib/file-input.component.d.ts:11:22 - error TS2420: Class 'NgxMatFileInputComponent' incorrectly implements i nterface 'CanUpdateErrorState'. Property 'updateErrorState' is missing in type 'NgxMatFileInputComponent' but required in type 'CanUpdateErrorState'.

export declare class NgxMatFileInputComponent extends _MatInputMixinBase implements MatFormFieldControl<FileOrArrayFile>, OnDestroy, DoCheck, CanUpdateErrorSta te, ControlValueAccessor {

node_modules/@angular/material/core/common-behaviors/error-state.d.ts:14:5 updateErrorState(): void; updateErrorState' is declared here.

"dependencies": {
"@angular-material-components/file-input": "^2.0.0",
"@angular/animations": "~9.0.6",
"@angular/cdk": "^9.2.0",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/forms": "~9.0.6",
"@angular/material": "^9.1.3",
"@angular/platform-browser": "~9.0.6",
"@angular/platform-browser-dynamic": "~9.0.6",
"@angular/router": "~9.0.6",
"d3": "^5.15.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.6",
"@angular/cli": "~9.0.7",
"@angular/compiler-cli": "~9.0.6",
"@angular/language-service": "~9.0.6",
"@types/d3": "^5.7.2",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}