Angular Material - Passing selected date value to a function using $event in angular material2 - Angular Material Tutorial
Passing selected date value to a function using $event in angular material2
datepicker-overview-example.html
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="value">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker [startAt]="startDate" (selectedChanged)="selectedDate($event)"></md-datepicker>
<p>ngModel Value: {{value}}</p>
<p>Date from selectedDate(): {{checkDate}}</p>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
datepicker-overview-example.ts
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="value">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker [startAt]="startDate" (selectedChanged)="selectedDate($event)"></md-datepicker>
<p>ngModel Value: {{value}}</p>
<p>Date from selectedDate(): {{checkDate}}</p>
import {Component} from '@angular/core';
@Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html'
})
export class DatepickerOverviewExample {
value: Date = new Date();
checkDate: Date;
selectedDate(date){
// ngModel still returns the old value
console.log("ngModel: " + this.value);
// date passes the newly selected value
console.log("Selected Value: " + date);
this.checkDate = date;
}
}