fix(datepicker): allow MatCalendarHeader to be re-used inside a custom header (#10856)

* refactor (MatCalendarHeader): remove Host decorator

* fix (remove unused import)

* feature (MatCalendarHeader): add custom header using the standard header to demo

* fix (ts lint)

* test (MatCalendarHeader): add a unit test for custom header input (ongoing)

* refactor (styling)

* refactor (styling)

* test (MatCalendarHeader): pass header component to datepicker

* test (MatCalendarHeader): remove header component to fix test (temporary)

* test (MatCalendarHeader): provide entryComponents

* test (MatCalendarHeader): add custom header component to declarations

* fix (MatCalendarHeader): fix issue with rollup-globals

* test (MatCalendarHeader): get rid of declarations param

* test (MatCalendarHeader): add test to check for standard calendar header selector

* test (MatCalendarHeader): rename test

* test (MatCalendarHeader): type annotations

Author: tobiasschweizer

src/lib/datepicker/calendar.ts

@@ -14,7 +14,6 @@ import {
   Component,
   EventEmitter,
   forwardRef,
-  Host,
   Inject,
   Input,
   OnChanges,
@@ -39,6 +38,7 @@ import {MatYearView} from './year-view';
   moduleId: module.id,
   selector: 'mat-calendar-header',
   templateUrl: 'calendar-header.html',
+  exportAs: 'matCalendarHeader',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -47,7 +47,7 @@ export class MatCalendarHeader<D> implements OnDestroy {
   private _destroyed = new Subject<void>();
 
   constructor(private _intl: MatDatepickerIntl,
-              @Host() @Inject(forwardRef(() => MatCalendar)) public calendar: MatCalendar<D>,
+              @Inject(forwardRef(() => MatCalendar)) public calendar: MatCalendar<D>,
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
               changeDetectorRef: ChangeDetectorRef) {

src/lib/datepicker/datepicker.spec.ts

@@ -7,7 +7,7 @@ import {
   createKeyboardEvent,
   dispatchEvent,
 } from '@angular/cdk/testing';
-import {Component, ViewChild} from '@angular/core';
+import {Component, FactoryProvider, Type, ValueProvider, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
@@ -30,13 +30,17 @@ import {MatDatepickerToggle} from './datepicker-toggle';
 import {MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepickerIntl, MatDatepickerModule} from './index';
 import {Subject} from 'rxjs';
 import {Directionality} from '@angular/cdk/bidi';
+import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
 
 describe('MatDatepicker', () => {
   const SUPPORTS_INTL = typeof Intl != 'undefined';
 
   // Creates a test component fixture.
-  function createComponent(component: any, imports: any[] = [], providers: any[] = []):
-    ComponentFixture<any> {
+  function createComponent(
+    component: Type<any>,
+    imports: Type<any>[] = [],
+    providers: (FactoryProvider | ValueProvider)[] = [],
+    entryComponents: Type<any>[] = []): ComponentFixture<any> {
 
     TestBed.configureTestingModule({
       imports: [
@@ -49,7 +53,13 @@ describe('MatDatepicker', () => {
         ...imports
       ],
       providers,
-      declarations: [component],
+      declarations: [component, ...entryComponents],
+    });
+
+    TestBed.overrideModule(BrowserDynamicTestingModule, {
+      set: {
+        entryComponents: [entryComponents]
+      }
     }).compileComponents();
 
     return TestBed.createComponent(component);
@@ -1489,6 +1499,35 @@ describe('MatDatepicker', () => {
     }));
 
   });
+
+  describe('datepicker with custom header', () => {
+    let fixture: ComponentFixture<DatepickerWithCustomHeader>;
+    let testComponent: DatepickerWithCustomHeader;
+
+    beforeEach(fakeAsync(() => {
+      fixture = createComponent(
+        DatepickerWithCustomHeader,
+        [MatNativeDateModule],
+        [],
+        [CustomHeaderForDatepicker]
+      );
+      fixture.detectChanges();
+      testComponent = fixture.componentInstance;
+    }));
+
+    it('should instantiate a datepicker with a custom header', fakeAsync(() => {
+      expect(testComponent).toBeTruthy();
+    }));
+
+    it('should find the standard header element', fakeAsync(() => {
+      testComponent.datepicker.open();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      expect(document.querySelector('mat-calendar-header')).toBeTruthy();
+    }));
+  });
 });
 
 
@@ -1736,3 +1775,22 @@ class DatepickerWithEvents {
 class DatepickerOpeningOnFocus {
   @ViewChild(MatDatepicker) datepicker: MatDatepicker<Date>;
 }
+
+
+@Component({
+  template: `
+    <input [matDatepicker]="ch">
+    <mat-datepicker #ch [calendarHeaderComponent]="CustomHeaderForDatepicker"></mat-datepicker>
+  `,
+})
+class DatepickerWithCustomHeader {
+  @ViewChild('ch') datepicker: MatDatepicker<Date>;
+}
+
+@Component({
+  template: `
+    <div>Custom element</div>
+    <mat-calendar-header></mat-calendar-header>
+  `,
+})
+class CustomHeaderForDatepicker {}

tools/package-tools/rollup-globals.ts

@@ -38,6 +38,7 @@ export const rollupGlobals = {
   '@angular/platform-browser': 'ng.platformBrowser',
   '@angular/platform-server': 'ng.platformServer',
   '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+  '@angular/platform-browser-dynamic/testing': 'ng.platformBrowserDynamic.testing',
   '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
   '@angular/core/testing': 'ng.core.testing',
   '@angular/common/testing': 'ng.common.testing',