docs(material/datepicker): Update close calendar label

Previously, the close calendar label was not updating correctly when switching languages. This commit fixes that issue.

Fixes angular#26652.

src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts

@@ -9,11 +9,6 @@ import 'moment/locale/ja';
 import 'moment/locale/fr';
 import {MatDatepickerIntl} from '@angular/material/datepicker';
 
-@Injectable()
-export class DatepickerIntl extends MatDatepickerIntl {
-  override closeCalendarLabel = 'カレンダーを閉じる';
-}
-
 /** @title Datepicker with different locale */
 @Component({
   selector: 'datepicker-locale-example',
@@ -32,7 +27,6 @@ export class DatepickerIntl extends MatDatepickerIntl {
       useClass: MomentDateAdapter,
       deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
     },
-    {provide: MatDatepickerIntl, useClass: DatepickerIntl},
     {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
   ],
 })
@@ -41,7 +35,10 @@ export class DatepickerLocaleExample {
     private _adapter: DateAdapter<any>,
     private _intl: MatDatepickerIntl,
     @Inject(MAT_DATE_LOCALE) private _locale: string,
-  ) {}
+  ) {
+    this._intl.closeCalendarLabel = 'カレンダーを閉じる';
+    this._intl.changes.next();
+  }
 
   french() {
     this._locale = 'fr';

src/material/datepicker/datepicker-intl.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, Optional, SkipSelf} from '@angular/core';
+import {Injectable} from '@angular/core';
 import {Subject} from 'rxjs';
 
 /** Datepicker data that requires internationalization. */
@@ -75,15 +75,3 @@ export class MatDatepickerIntl {
     return `${start} to ${end}`;
   }
 }
-
-/** @docs-private */
-export function MAT_DATEPICKER_INTL_PROVIDER_FACTORY(parentIntl: MatDatepickerIntl) {
-  return parentIntl || new MatDatepickerIntl();
-}
-
-/** @docs-private */
-export const MAT_DATEPICKER_INTL_PROVIDER = {
-  provide: MatDatepickerIntl,
-  deps: [[new Optional(), new SkipSelf(), MatDatepickerIntl]],
-  useFactory: MAT_DATEPICKER_INTL_PROVIDER_FACTORY,
-};

src/material/datepicker/datepicker-module.ts

@@ -22,7 +22,7 @@ import {
   MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
 } from './datepicker-base';
 import {MatDatepickerInput} from './datepicker-input';
-import {MAT_DATEPICKER_INTL_PROVIDER} from './datepicker-intl';
+import {MatDatepickerIntl} from './datepicker-intl';
 import {MatDatepickerToggle, MatDatepickerToggleIcon} from './datepicker-toggle';
 import {MatMonthView} from './month-view';
 import {MatMultiYearView} from './multi-year-view';
@@ -82,6 +82,6 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d
     MatDatepickerCancel,
     MatDatepickerApply,
   ],
-  providers: [MAT_DATEPICKER_INTL_PROVIDER, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
+  providers: [MatDatepickerIntl, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
 })
 export class MatDatepickerModule {}

tools/public_api_guard/material/datepicker.md

@@ -48,7 +48,6 @@ import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
-import { Optional } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { Portal } from '@angular/cdk/portal';
 import { ScrollStrategy } from '@angular/cdk/overlay';
@@ -108,16 +107,6 @@ export type ExtractDateTypeFromSelection<T> = T extends DateRange<infer D> ? D :
 // @public
 export const MAT_DATE_RANGE_SELECTION_STRATEGY: InjectionToken<MatDateRangeSelectionStrategy<any>>;
 
-// @public
-export const MAT_DATEPICKER_INTL_PROVIDER: {
-    provide: typeof MatDatepickerIntl;
-    deps: Optional[][];
-    useFactory: typeof MAT_DATEPICKER_INTL_PROVIDER_FACTORY;
-};
-
-// @public
-export function MAT_DATEPICKER_INTL_PROVIDER_FACTORY(parentIntl: MatDatepickerIntl): MatDatepickerIntl;
-
 // @public
 export const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;