feature (MatCalendarHeader): move header in own template

Author: Tobias Schweizer

src/lib/datepicker/calendar-header.html

@@ -0,0 +1,22 @@
+<div class="mat-calendar-header">
+
+    <div class="mat-calendar-controls">
+        <button mat-button class="mat-calendar-period-button"
+                (click)="calendar.currentPeriodClicked()" [attr.aria-label]="calendar.periodButtonLabel">
+            {{calendar.periodButtonText}}
+            <div class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
+        </button>
+
+        <div class="mat-calendar-spacer"></div>
+
+        <button mat-icon-button class="mat-calendar-previous-button"
+                [disabled]="!calendar.previousEnabled()" (click)="calendar.previousClicked()"
+                [attr.aria-label]="calendar.prevButtonLabel">
+        </button>
+
+        <button mat-icon-button class="mat-calendar-next-button"
+                [disabled]="!calendar.nextEnabled()" (click)="calendar.nextClicked()"
+                [attr.aria-label]="calendar.nextButtonLabel">
+        </button>
+    </div>
+</div>

src/lib/datepicker/calendar.html

@@ -1,29 +1,7 @@
-<div class="mat-calendar-header">
 
-  <ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
+<ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
 
-  <div class="mat-calendar-controls">
-    <button mat-button class="mat-calendar-period-button"
-            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
-      {{_periodButtonText}}
-      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="_currentView != 'month'"></div>
-    </button>
-
-    <div class="mat-calendar-spacer"></div>
-
-    <button mat-icon-button class="mat-calendar-previous-button"
-            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
-            [attr.aria-label]="_prevButtonLabel">
-    </button>
-
-    <button mat-icon-button class="mat-calendar-next-button"
-            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
-            [attr.aria-label]="_nextButtonLabel">
-    </button>
-  </div>
-</div>
-
-<div class="mat-calendar-content" [ngSwitch]="_currentView" cdkMonitorSubtreeFocus tabindex="-1">
+<div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
   <mat-month-view
       *ngSwitchCase="'month'"
       [(activeDate)]="_activeDate"

src/lib/datepicker/calendar.spec.ts

@@ -61,22 +61,22 @@ describe('MatCalendar', () => {
     });
 
     it('should be in month view with specified month active', () => {
-      expect(calendarInstance._currentView).toBe('month');
+      expect(calendarInstance.currentView).toBe('month');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
     });
 
     it('should toggle view when period clicked', () => {
-      expect(calendarInstance._currentView).toBe('month');
+      expect(calendarInstance.currentView).toBe('month');
 
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance.currentView).toBe('multi-year');
 
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('month');
+      expect(calendarInstance.currentView).toBe('month');
     });
 
     it('should go to next and previous month', () => {
@@ -97,13 +97,13 @@ describe('MatCalendar', () => {
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance.currentView).toBe('multi-year');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
 
       (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('year');
+      expect(calendarInstance.currentView).toBe('year');
 
       nextButton.click();
       fixture.detectChanges();
@@ -120,7 +120,7 @@ describe('MatCalendar', () => {
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance.currentView).toBe('multi-year');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
 
       nextButton.click();
@@ -138,21 +138,21 @@ describe('MatCalendar', () => {
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance.currentView).toBe('multi-year');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
 
       let yearCells = calendarElement.querySelectorAll('.mat-calendar-body-cell');
       (yearCells[0] as HTMLElement).click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('year');
+      expect(calendarInstance.currentView).toBe('year');
       expect(calendarInstance._activeDate).toEqual(new Date(2016, JAN, 31));
 
       let monthCells = calendarElement.querySelectorAll('.mat-calendar-body-cell');
       (monthCells[monthCells.length - 1] as HTMLElement).click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('month');
+      expect(calendarInstance.currentView).toBe('month');
       expect(calendarInstance._activeDate).toEqual(new Date(2016, DEC, 31));
       expect(testComponent.selected).toBeFalsy('no date should be selected yet');
     });
@@ -162,22 +162,22 @@ describe('MatCalendar', () => {
       (monthCells[monthCells.length - 1] as HTMLElement).click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('month');
+      expect(calendarInstance.currentView).toBe('month');
       expect(testComponent.selected).toEqual(new Date(2017, JAN, 31));
     });
 
     it('should emit the selected month on cell clicked in year view', () => {
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance.currentView).toBe('multi-year');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
 
       (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
 
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('year');
+      expect(calendarInstance.currentView).toBe('year');
 
       (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
 
@@ -189,7 +189,7 @@ describe('MatCalendar', () => {
       periodButton.click();
       fixture.detectChanges();
 
-      expect(calendarInstance._currentView).toBe('multi-year');
+      expect(calendarInstance.currentView).toBe('multi-year');
       expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
 
       (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
@@ -239,12 +239,12 @@ describe('MatCalendar', () => {
             dispatchMouseEvent(periodButton, 'click');
             fixture.detectChanges();
 
-            expect(calendarInstance._currentView).toBe('multi-year');
+            expect(calendarInstance.currentView).toBe('multi-year');
 
             (calendarBodyEl.querySelector('.mat-calendar-body-active') as HTMLElement).click();
             fixture.detectChanges();
 
-            expect(calendarInstance._currentView).toBe('year');
+            expect(calendarInstance.currentView).toBe('year');
           });
 
           it('should return to month view on enter', () => {
@@ -256,7 +256,7 @@ describe('MatCalendar', () => {
             dispatchKeyboardEvent(tableBodyEl, 'keydown', ENTER);
             fixture.detectChanges();
 
-            expect(calendarInstance._currentView).toBe('month');
+            expect(calendarInstance.currentView).toBe('month');
             expect(calendarInstance._activeDate).toEqual(new Date(2017, FEB, 28));
             expect(testComponent.selected).toBeUndefined();
           });
@@ -267,7 +267,7 @@ describe('MatCalendar', () => {
             dispatchMouseEvent(periodButton, 'click');
             fixture.detectChanges();
 
-            expect(calendarInstance._currentView).toBe('multi-year');
+            expect(calendarInstance.currentView).toBe('multi-year');
           });
 
           it('should go to year view on enter', () => {
@@ -279,7 +279,7 @@ describe('MatCalendar', () => {
             dispatchKeyboardEvent(tableBodyEl, 'keydown', ENTER);
             fixture.detectChanges();
 
-            expect(calendarInstance._currentView).toBe('year');
+            expect(calendarInstance.currentView).toBe('year');
             expect(calendarInstance._activeDate).toEqual(new Date(2018, JAN, 31));
             expect(testComponent.selected).toBeUndefined();
           });
@@ -491,7 +491,7 @@ describe('MatCalendar', () => {
       });
 
       it('should not allow selection of disabled date in month view', () => {
-        expect(calendarInstance._currentView).toBe('month');
+        expect(calendarInstance.currentView).toBe('month');
         expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 1));
 
         dispatchKeyboardEvent(tableBodyEl, 'keydown', ENTER);
@@ -512,13 +512,13 @@ describe('MatCalendar', () => {
         calendarInstance._activeDate = new Date(2017, NOV, 1);
         fixture.detectChanges();
 
-        expect(calendarInstance._currentView).toBe('year');
+        expect(calendarInstance.currentView).toBe('year');
 
         tableBodyEl = calendarElement.querySelector('.mat-calendar-body') as HTMLElement;
         dispatchKeyboardEvent(tableBodyEl, 'keydown', ENTER);
         fixture.detectChanges();
 
-        expect(calendarInstance._currentView).toBe('month');
+        expect(calendarInstance.currentView).toBe('month');
         expect(testComponent.selected).toBeUndefined();
       });
     });

src/lib/datepicker/calendar.ts

@@ -12,6 +12,7 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  Host,
   Inject,
   Input,
   OnChanges,
@@ -35,13 +36,13 @@ import {ComponentPortal, ComponentType, Portal} from '@angular/cdk/portal';
 @Component({
     moduleId: module.id,
     selector: 'mat-calendar-header',
-    template: '',
+    templateUrl: 'calendar-header.html',
     encapsulation: ViewEncapsulation.None,
     preserveWhitespaces: false,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCalendarHeader {
-    constructor() {
+    constructor(@Host() public calendar: MatCalendar<any>) {
 
     }
 }
@@ -149,15 +150,15 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
   private _clampedActiveDate: D;
 
   /** Whether the calendar is in month view. */
-  _currentView: 'month' | 'year' | 'multi-year';
+  currentView: 'month' | 'year' | 'multi-year';
 
   /** The label for the current calendar view. */
-  get _periodButtonText(): string {
-    if (this._currentView == 'month') {
+  get periodButtonText(): string {
+    if (this.currentView == 'month') {
       return this._dateAdapter.format(this._activeDate, this._dateFormats.display.monthYearLabel)
           .toLocaleUpperCase();
     }
-    if (this._currentView == 'year') {
+    if (this.currentView == 'year') {
       return this._dateAdapter.getYearName(this._activeDate);
     }
     const activeYear = this._dateAdapter.getYear(this._activeDate);
@@ -168,27 +169,27 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
     return `${firstYearInView} \u2013 ${lastYearInView}`;
   }
 
-  get _periodButtonLabel(): string {
-    return this._currentView == 'month' ?
+  get periodButtonLabel(): string {
+    return this.currentView == 'month' ?
         this._intl.switchToMultiYearViewLabel : this._intl.switchToMonthViewLabel;
   }
 
   /** The label for the the previous button. */
-  get _prevButtonLabel(): string {
+  get prevButtonLabel(): string {
     return {
       'month': this._intl.prevMonthLabel,
       'year': this._intl.prevYearLabel,
       'multi-year': this._intl.prevMultiYearLabel
-    }[this._currentView];
+    }[this.currentView];
   }
 
   /** The label for the the next button. */
-  get _nextButtonLabel(): string {
+  get nextButtonLabel(): string {
     return {
       'month': this._intl.nextMonthLabel,
       'year': this._intl.nextYearLabel,
       'multi-year': this._intl.nextMultiYearLabel
-    }[this._currentView];
+    }[this.currentView];
   }
 
   constructor(private _intl: MatDatepickerIntl,
@@ -212,7 +213,7 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
     this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);
 
     this._activeDate = this.startAt || this._dateAdapter.today();
-    this._currentView = this.startView;
+    this.currentView = this.startView;
   }
 
   ngOnDestroy() {
@@ -255,50 +256,50 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
   /** Handles year/month selection in the multi-year/year views. */
   _goToDateInView(date: D, view: 'month' | 'year' | 'multi-year'): void {
     this._activeDate = date;
-    this._currentView = view;
+    this.currentView = view;
   }
 
   /** Handles user clicks on the period label. */
-  _currentPeriodClicked(): void {
-    this._currentView = this._currentView == 'month' ? 'multi-year' : 'month';
+  currentPeriodClicked(): void {
+    this.currentView = this.currentView == 'month' ? 'multi-year' : 'month';
   }
 
   /** Handles user clicks on the previous button. */
-  _previousClicked(): void {
-    this._activeDate = this._currentView == 'month' ?
+  previousClicked(): void {
+    this._activeDate = this.currentView == 'month' ?
         this._dateAdapter.addCalendarMonths(this._activeDate, -1) :
         this._dateAdapter.addCalendarYears(
-            this._activeDate, this._currentView == 'year' ? -1 : -yearsPerPage);
+            this._activeDate, this.currentView == 'year' ? -1 : -yearsPerPage);
   }
 
   /** Handles user clicks on the next button. */
-  _nextClicked(): void {
-    this._activeDate = this._currentView == 'month' ?
+  nextClicked(): void {
+    this._activeDate = this.currentView == 'month' ?
         this._dateAdapter.addCalendarMonths(this._activeDate, 1) :
         this._dateAdapter.addCalendarYears(
-            this._activeDate, this._currentView == 'year' ? 1 : yearsPerPage);
+            this._activeDate, this.currentView == 'year' ? 1 : yearsPerPage);
   }
 
   /** Whether the previous period button is enabled. */
-  _previousEnabled(): boolean {
+  previousEnabled(): boolean {
     if (!this.minDate) {
       return true;
     }
     return !this.minDate || !this._isSameView(this._activeDate, this.minDate);
   }
 
   /** Whether the next period button is enabled. */
-  _nextEnabled(): boolean {
+  nextEnabled(): boolean {
     return !this.maxDate || !this._isSameView(this._activeDate, this.maxDate);
   }
 
   /** Whether the two dates represent the same view in the current view mode (month or year). */
   private _isSameView(date1: D, date2: D): boolean {
-    if (this._currentView == 'month') {
+    if (this.currentView == 'month') {
       return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) &&
           this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2);
     }
-    if (this._currentView == 'year') {
+    if (this.currentView == 'year') {
       return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);
     }
     // Otherwise we are in 'multi-year' view.