feat(datepicker): add ng-content to datepicker header (#13236)

* feat(datepicker): add ng-content to datepicker header

- add ng-content to datepicker header to simplify
  customization of this component
- fix tests using calendarHeaderComponent property
  to correctly reference the custom component
- add test to prove that custom component was
  rendered

Closes #13212

* test(datepicker): code review fixes

- remove unnecessary tests
- simplify demo code

Author: mnahkies

src/demo-app/datepicker/datepicker-demo.html

@@ -154,3 +154,13 @@ <h2>Datepicker with custom header</h2>
     <mat-datepicker #customHeaderPicker [calendarHeaderComponent]="customHeader"></mat-datepicker>
   </mat-form-field>
 </p>
+
+<h2>Datepicker with custom header extending the default header</h2>
+<p>
+  <mat-form-field>
+    <mat-label>Custom calendar header extending default</mat-label>
+    <input matInput [matDatepicker]="customHeaderNgContentPicker">
+    <mat-datepicker-toggle matSuffix [for]="customHeaderNgContentPicker"></mat-datepicker-toggle>
+    <mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
+  </mat-form-field>
+</p>

src/demo-app/datepicker/datepicker-demo.ts

@@ -12,10 +12,12 @@ import {
   Component,
   Host,
   Inject,
+  ViewChild,
+  Optional,
   OnDestroy
 } from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatCalendar} from '@angular/material';
+import {MatCalendar, MatCalendarHeader} from '@angular/material';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, ThemePalette} from '@angular/material/core';
 import {MatDatepickerInputEvent} from '@angular/material/datepicker';
 import {Subject} from 'rxjs';
@@ -53,6 +55,7 @@ export class DatepickerDemo {
 
   // pass custom header component type as input
   customHeader = CustomHeader;
+  customHeaderNgContent = CustomHeaderNgContent;
 }
 
 // Custom header component for datepicker
@@ -98,3 +101,27 @@ export class CustomHeader<D> implements OnDestroy {
         this._dateAdapter.addCalendarYears(this._calendar.activeDate, 1);
   }
 }
+
+@Component({
+    moduleId: module.id,
+    selector: 'customer-header-ng-content',
+    template: `
+      <mat-calendar-header #header>
+        <button mat-button type="button" (click)="todayClicked()">TODAY</button>
+      </mat-calendar-header>
+    `
+})
+export class CustomHeaderNgContent<D> {
+
+  @ViewChild(MatCalendarHeader)
+  header: MatCalendarHeader<D>;
+
+  constructor(@Optional() private _dateAdapter: DateAdapter<D>) {}
+
+  todayClicked() {
+    let calendar = this.header.calendar;
+
+    calendar.activeDate = this._dateAdapter.today();
+    calendar.currentView = 'month';
+  }
+}

src/demo-app/demo-app/demo-module.ts

@@ -25,7 +25,7 @@ import {CardDemo} from '../card/card-demo';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
 import {ChipsDemo} from '../chips/chips-demo';
 import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
-import {CustomHeader, DatepickerDemo} from '../datepicker/datepicker-demo';
+import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DemoMaterialModule} from '../demo-material-module';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
 import {DrawerDemo} from '../drawer/drawer-demo';
@@ -92,6 +92,7 @@ import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
     ConnectedOverlayDemo,
     ContentElementDialog,
     CustomHeader,
+    CustomHeaderNgContent,
     DatepickerDemo,
     DemoApp,
     DialogDemo,
@@ -138,6 +139,7 @@ import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
   entryComponents: [
     ContentElementDialog,
     CustomHeader,
+    CustomHeaderNgContent,
     DemoApp,
     ExampleBottomSheet,
     IFrameDialog,

src/lib/datepicker/calendar-header.html

@@ -10,6 +10,8 @@
 
     <div class="mat-calendar-spacer"></div>
 
+    <ng-content></ng-content>
+
     <button mat-icon-button type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
             [attr.aria-label]="prevButtonLabel">

src/lib/datepicker/datepicker.spec.ts

@@ -1632,7 +1632,17 @@ describe('MatDatepicker', () => {
 
       expect(document.querySelector('mat-calendar-header')).toBeTruthy();
     }));
+
+    it('should find the custom element', fakeAsync(() => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        expect(document.querySelector('.custom-element')).toBeTruthy();
+    }));
   });
+
 });
 
 
@@ -1885,23 +1895,22 @@ class DatepickerOpeningOnFocus {
 @Component({
   template: `
     <input [matDatepicker]="ch">
-    <mat-datepicker #ch [calendarHeaderComponent]="CustomHeaderForDatepicker"></mat-datepicker>
+    <mat-datepicker #ch [calendarHeaderComponent]="customHeaderForDatePicker"></mat-datepicker>
   `,
 })
 class DatepickerWithCustomHeader {
   @ViewChild('ch') datepicker: MatDatepicker<Date>;
+  customHeaderForDatePicker = CustomHeaderForDatepicker;
 }
 
 @Component({
   template: `
-    <div>Custom element</div>
+    <div class="custom-element">Custom element</div>
     <mat-calendar-header></mat-calendar-header>
   `,
 })
 class CustomHeaderForDatepicker {}
 
-
-
 @Component({
   template: `
     <input [matDatepicker]="assignedDatepicker" [value]="date">