Angular reading input element value from parent component

Question

I have a simple component with a template consisted of two date pickers and a selector named 'app-date-adapter'

<mat-form-field>
 <input matInput [matDatepicker]="picker" placeholder="Choose a date" 
    #fromDate>
 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="Choose a date" 
 #toDate>
 <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
 <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

this component has a selector and i included the selector inside another component template (which i call parent), that has this button

 <app-date-adapter ></app-date-adapter>
 <button class="btn-primary" type="button" class="btn btn-info" (click)="dateRange(fromDate.value, toDate.value)">Filter My Date</button>

It doesn't work and it cannot identify fromDate and toDate elements, where as if i put them all together in one template then it works. Do I really need event binding and all of that for getting those input values from the child template?! There is no simpler way than that?

amal amal · Accepted Answer · 2017-11-01T15:08:49

Haven't tested this out for your case, but I think this should work for you.

In your child component class,

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('fromDate') fromDate: ElementRef;
@ViewChild('toDate') toDate: ElementRef;

In your parent template,

<app-date-adapter #appDateAdapter></app-date-adapter>
<button class="btn-primary" type="button" class="btn btn-info" (click)="dateRange(appDateAdapter?.fromDate?.nativeElement?.value, appDateAdapter?.toDate?.nativeElement?.value)">Filter My Date</button>

Try and see if it worked. Hope it helps.

Angular reading input element value from parent component

1 Answers