refactor (custom header for mat-calendar): renaming and code improvements

Author: Tobias Schweizer

src/lib/datepicker/calendar.ts

@@ -50,10 +50,10 @@ import {ComponentPortal, ComponentType, Portal} from '@angular/cdk/portal';
  * Default header of a [MatCalendar].
  */
 @Component({
-    selector: 'default-header',
+    selector: 'mat-calendar-header',
     template: 'default header'
 })
-export class DefaultHeader {
+export class MatCalendarHeader {
     constructor() {
 
     }
@@ -78,11 +78,15 @@ export class DefaultHeader {
 })
 export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
 
-  /** An input indicating the type of the custom header component, if set. */
-  @Input() customCalendarHeaderComponent: ComponentType<any>;
+  /** An input indicating the type of the header component, if set. */
+  @Input() headerComponent: ComponentType<any>;
 
-  /** A portal containing the header for this calendar. */
-  calendarHeaderPortal: Portal<any>;
+  /** A portal containing the header component type for this calendar. */
+  private _calendarHeaderPortal: Portal<any>;
+
+  get calendarHeaderPortal() {
+    return this._calendarHeaderPortal;
+  }
 
   private _intlChanges: Subscription;
 
@@ -145,7 +149,7 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
         (!this.dateFilter || this.dateFilter(date)) &&
         (!this.minDate || this._dateAdapter.compareDate(date, this.minDate) >= 0) &&
         (!this.maxDate || this._dateAdapter.compareDate(date, this.maxDate) <= 0);
-  }
+  };
 
   /**
    * The current active date. This determines which time period is shown and which date is
@@ -221,15 +225,7 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
 
   ngAfterContentInit() {
 
-    if (this.customCalendarHeaderComponent !== undefined) {
-        // custom header
-        this.calendarHeaderPortal = new ComponentPortal(this.customCalendarHeaderComponent);
-    } else {
-        // default header
-        this.calendarHeaderPortal = new ComponentPortal(DefaultHeader);
-    }
-
-    // console.log(this.calendarHeaderPortal)
+    this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);
 
     this._activeDate = this.startAt || this._dateAdapter.today();
     this._focusActiveCell();

src/lib/datepicker/datepicker-content.html

@@ -9,5 +9,5 @@
     [selected]="datepicker._selected"
     (selectedChange)="datepicker._select($event)"
     (_userSelection)="datepicker.close()"
-    [customCalendarHeaderComponent]="datepicker.customCalendarHeaderComponent">
+    [headerComponent]="datepicker.customCalendarHeaderComponent">
 </mat-calendar>

src/lib/datepicker/datepicker-module.ts

@@ -13,7 +13,7 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
-import {DefaultHeader, MatCalendar} from './calendar';
+import {MatCalendarHeader, MatCalendar} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {
   MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
@@ -62,15 +62,15 @@ import {PortalModule} from '@angular/cdk/portal';
     MatMonthView,
     MatYearView,
     MatMultiYearView,
-    DefaultHeader
+    MatCalendarHeader
   ],
   providers: [
     MatDatepickerIntl,
     MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
   ],
   entryComponents: [
     MatDatepickerContent,
-    DefaultHeader,
+    MatCalendarHeader,
   ]
 })
 export class MatDatepickerModule {}