refactor (custom header component): add test function to custom header component

Author: Tobias Schweizer

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

@@ -14,46 +14,50 @@ import {MatCalendar} from '@angular/material';
 
 
 @Component({
-  moduleId: module.id,
-  selector: 'datepicker-demo',
-  templateUrl: 'datepicker-demo.html',
-  styleUrls: ['datepicker-demo.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    moduleId: module.id,
+    selector: 'datepicker-demo',
+    templateUrl: 'datepicker-demo.html',
+    styleUrls: ['datepicker-demo.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerDemo {
-  touch: boolean;
-  filterOdd: boolean;
-  yearView: boolean;
-  inputDisabled: boolean;
-  datepickerDisabled: boolean;
-  minDate: Date;
-  maxDate: Date;
-  startAt: Date;
-  date: Date;
-  lastDateInput: Date | null;
-  lastDateChange: Date | null;
-
-  dateFilter =
-      (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
-
-  onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
-  onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
-
-  dateCtrl = new FormControl();
-
-  // pass custom header component type as input
-  customHeader = CustomHeader;
+    touch: boolean;
+    filterOdd: boolean;
+    yearView: boolean;
+    inputDisabled: boolean;
+    datepickerDisabled: boolean;
+    minDate: Date;
+    maxDate: Date;
+    startAt: Date;
+    date: Date;
+    lastDateInput: Date | null;
+    lastDateChange: Date | null;
+
+    dateFilter =
+        (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
+
+    onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
+    onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;
+
+    dateCtrl = new FormControl();
+
+    // pass custom header component type as input
+    customHeader = CustomHeader;
 }
 
 // Custom Header Component for DatePicker Calendar
 @Component({
     selector: 'custom-header',
-    template: '<select><option>Gregorian</option><option>Julian</option></select>'
+    template: '<select (change)="convertCalendarFormatTo($event.target.value)"><option>Gregorian</option><option>Julian</option></select>'
 })
 export class CustomHeader {
     constructor(@Host() public calendar: MatCalendar<any>,
                 public adapter: DateAdapter<any>) {
-        console.log(this.calendar);
-        console.log(this.adapter);
+        //console.log(this.calendar);
+        //console.log(this.adapter);
+    }
+
+    convertCalendarFormatTo(format: string) {
+        console.log(format);
     }
 }

src/lib/datepicker/calendar.ts

@@ -228,7 +228,7 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
         this.calendarHeaderPortal = new ComponentPortal(DefaultHeader);
     }
 
-    console.log(this.calendarHeaderPortal)
+    // console.log(this.calendarHeaderPortal)
 
     this._activeDate = this.startAt || this._dateAdapter.today();
     this._focusActiveCell();