Cannot find name "MAT_DATE_LOCALE" with Material.angular Datepicker

Question

According to the documentation https://material.angular.io/components/datepicker/overview here to set the locale code to one you want you provide it by putting

providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
]

But then my app won't compile as it tells me it cannot find the name MAT_DATE_LOCALE. Am I missing something here as in I have to define it myself? Though, I can't think of where to put it as it's all in the module class.

Solution 1

In Angular 9 do the import:

 { MAT_DATE_LOCALE } from '@angular/material/core';

I suppose that in the import must be entered specified path import. Optimization stuff.

Sorry for my english.

From Angular 9, no component can be imported through @angular/material. You are to use the individual secondary entry-points, such as @angular/material/button.

Top New Features of Angular 9

Solution 2

To use MAT_DATE_LOCALE, it has to be imported explicitly like below

import { MAT_DATE_LOCALE } from '@angular/material';

Please note that MAT_DATE_LOCALE should not be added to imports: [ ] array.

Solution 3

When you upgrade your project dependancies from old version to new version some modules are moved into different namespaces, so you need to manually change them

i am using angular 9.1.2

I've used this

import { MAT_DATE_LOCALE } from '@angular/material/core';

instead of

import { MAT_DATE_LOCALE } from '@angular/material';

Solution 4

In my case I imported this

import { MatInputModule, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material';
import { MatDatepickerModule } from '@angular/material/datepicker';

and in my material.module.ts I do

imports: [
  ....
  MatDatepickerModule,
  MatNativeDateModule
],
exports: [
   ...
   MatDatepickerModule,
   MatNativeDateModule
],
providers: [
   {provide: MAT_DATE_LOCALE, useValue: 'pt-BR'},
],

in this whay its work

View more solutions