Angular 8: NullInjectorError: No provider for MatCalendar

Question

I have the following code, and receiving error. How would I solve this? I am creating a date picker with Angular Date Modules,

NullInjectorError: StaticInjectorError(AppModule)[MonthDayDatepickerComponent -> MatCalendar]: StaticInjectorError(Platform: core)[MonthDayDatepickerComponent -> MatCalendar]: NullInjectorError: No provider for MatCalendar!

Already did

import { MatDatepickerModule } from '@angular/material/datepicker';

and again in imports[

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  Inject,
  OnDestroy
} from '@angular/core';
import {MatCalendar} from '@angular/material/datepicker';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, MAT_DATE_LOCALE} from '@angular/material/core';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import * as _moment from 'moment';

const moment =  _moment;
import {FormControl} from '@angular/forms';

export const MONTH_DAY_DATE_FORMATS = {
  parse: {
    dateInput: 'MM/DD',
  },
  display: {
    dateInput: 'MM/DD',
    monthYearLabel: 'MMM',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'app-month-day-datepicker',
  templateUrl: './month-day-datepicker.component.html',
  styleUrls: ['./month-day-datepicker.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [{
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
  }, { provide: MAT_DATE_FORMATS, useValue: MONTH_DAY_DATE_FORMATS }]
})
export class MonthDayDatepickerComponent<D> implements OnDestroy {
  private _destroyed = new Subject<void>();

  constructor(
    private _calendar: MatCalendar<D>, private _dateAdapter: DateAdapter<D>,
    @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, cdr: ChangeDetectorRef) {
    _calendar.stateChanges
      .pipe(takeUntil(this._destroyed))
      .subscribe(() => cdr.markForCheck());
  }

  ngOnDestroy() {
    this._destroyed.next();
    this._destroyed.complete();
  }

  get periodLabel() {
    return this._dateAdapter
      .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
      .toLocaleUpperCase();
  }

  previousClicked(mode: any) {
    this._calendar.activeDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1);
  }

  nextClicked(mode: any) {
    this._calendar.activeDate = this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1);
  }
}

Tran Son Hoang Tran Son Hoang · Accepted Answer · 2019-11-15T08:07:39

I think the problem at your import file. In this article, have a small guide to handle material in Angular.

Set Up an Angular 8 Project with Material and NGXS

Because when I worked with Angular project before which using angular material for UI. I always import material module from @angular/material.

Angular 8: NullInjectorError: No provider for MatCalendar

3 Answers