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;
  }
}
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

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap


Related Searches to