[SOLVED] use Angular Material MomentDateAdapter only in component level

use Angular Material MomentDateAdapter only in component level

I have multiple components in my app that used mat-datepicker in them. but In one of them, I wanna use MomentDateAdapter. The problem is when I provide it in one component it affects all other components.

@Component({
 selector: 'my-moment-mat-date-picker',
 templateUrl: './my-moment-mat-date-picker.component.html',
 styleUrls: ['./my-moment-mat-date-picker.component.scss'],
 providers: [
 // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
 // application's root module. We provide it at the component level here, due to limitations of
 // our example generation script.
{
  provide: DateAdapter,
  useClass: MomentDateAdapter,
  deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
},

 { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})

and

import {
 MAT_MOMENT_DATE_ADAPTER_OPTIONS,
 MomentDateAdapter,
 }  from '@angular/material-moment-adapter';
import {
 DateAdapter,
 MAT_DATE_FORMATS,
 MAT_DATE_LOCALE,
} from '@angular/material/core';
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
parse: {
 dateInput: 'LL',
},
display: {
  dateInput: 'LL',
   monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY',
},
};

Solution

The problem was I Imported import { MatMomentDateModule } from "@angular/material-moment-adapter" in my component's module and then imported this module in the shared module.