I am working on a project with a child component (calendar) and a parent component (form). I need to select a value in the calendar and then access that value in the form component.
What is the best way to achieve this?
Child Component.ts:
import {
Component,
OnInit,
ViewChild,
Input
} from '@angular/core';
@Component({
selector: 'calendar',
template: '
<md2-datepicker name="mindate"
placeholder="Minimum Date"
[(ngModel)]="minDate"
[mode]="mode"
[touchUi]="touch"
[format]="dateFormat"
#minDateControl="ngModel" [fromDate]="minDateControl">
</md2-datepicker>
<md2-datepicker name="maxdate"
placeholder="Maximum Date"
[(ngModel)]="maxDate"
[min]="minDate"
[mode]="mode"
[touchUi]="touch"
[format]="dateFormat"
#maxDateControl="ngModel"></md2-datepicker>
',
})
export class CalendarComponent implements OnInit {
today: Date = new Date();
minDate: Date;
maxDate: Date;
constructor(){
}
ngOnInit(){
}
}
Parent component :
import {
Component,
OnInit,
ViewChild,
Input
} from '@angular/core';
import { Router } from '@angular/router';
import { ChartModule,ChartComponent } from 'angular2-chartjs';
import { ChartService } from './../shared/chart.service';
import { Colors, xAxisWidth } from './../shared/data';
@Component({
selector: 'form-js',
template: `
<h3 class="chartHeading">Parameter Selection Form</h3>
<calendar></calendar>
`,
})
export class FormComponent implements OnInit {
@Input fromDate: string;
@Input toDate: string;
constructor(){
}
ngOnInit(){
}
alert(fromDate);
}
How do I retrieve the from and to date values from the form component in Angular 2?