Возникли проблемы при получении испускаемого значения от компонента

Question

Мне нужно средство выбора даты для приложения, над которым я работаю. Я выбрал один из здесь https://material.angular.io/components/datepicker/overview. Код, который я вставил в свой компонент DatePicker, взят из того, что находится под Изменение цвета DatePicker .

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>

Теперь я хотел бы поймать выбранные пользователем значения. Но я не понимаю, как я должен это сделать. Как событие происходит здесь?

Answer 1

Попробуйте (dateChange) событие

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

вот демонстрационный код