CODEWITHSUNDEEP
angularangular-material
GoBear
GoBear

Reputation: 558

Having trouble getting the emitted value from the component

I need a datepicker for the app I'm working on. I've chosen one from here https://material.angular.io/components/datepicker/overview. The code I inserted in my datepicker component is taken from what is right under Changing the datepicker colors.

datepicker.ts

import {Component} from '@angular/core';

/** @title Datepicker palette colors */
@Component({
  selector: 'datepicker-color-example',
  templateUrl: 'datepicker-color-example.html',
  styleUrls: ['datepicker-color-example.css'],
})
export class DatepickerColorExample {}

datepicker.html

<mat-form-field color="accent">
  <mat-label>Inherited calendar color</mat-label>
  <input matInput [matDatepicker]="picker1">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field color="accent">
  <mat-label>Custom calendar color</mat-label>
  <input matInput [matDatepicker]="picker2">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

Now I would like to catch the user chosen values. But I don't get how I'm supposed to do this. How does the event get emitted here?

Upvotes: 1

Views: 29

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17494

Try (dateChange) event

<mat-form-field>
  <input matInput
    [matDatepicker]="picker"
    placeholder="Different locale"
    (dateChange)="setDate($event.value)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<p>{{ date }}</p>

here is a demo code

Upvotes: 1

Related Questions