How to get child component value to parent component in angular2. what is the best approach?

Question

I have child component (calendar) and parent component (form). I have to select value in calendar and I want to access value in form component.

How can I achieve this in best possible way?

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 can I achieve from and to date values in form component in angular2?

Answer 1

you can use the @Output decorator, which makes it easy to communicate between the Parent component and the Child component

in the Parent component:

@Component({
  selector: 'form-js',
  template: `
    <h3 class="chartHeading">Parameter Selection Form</h3>
    <calendar (onSelectValue)='selectValue($event)'></calendar>
  `,
})
export class FormComponent{

   selectValue( newValue : any ) {
     console.log(newValue);
   }

}

in the child component

import {
  Component,
  OnInit,
  ViewChild,
  Input,
  Output  // add this import
  EventEmitter // add this import as well
} from '@angular/core';

@Component({
  selector: 'calendar',
  template: '
    <md2-datepicker name="mindate"
                      placeholder="Minimum Date"
                      [(ngModel)]="minDate"
                      [mode]="mode"
                      (change)='onChange()'  // add this event listener
                      [touchUi]="touch"
                      [format]="dateFormat"
                      #minDateControl="ngModel" [fromDate]="minDateControl"></md2-datepicker>
      <md2-datepicker name="maxdate"
                      placeholder="Maximum Date"
                      [(ngModel)]="maxDate"
                      [min]="minDate"
                      (change)='onChange()'  //add this event listener
                      [mode]="mode"
                      [touchUi]="touch"
                      [format]="dateFormat"
                      #maxDateControl="ngModel"></md2-datepicker>
  ',
})

export class CalendarComponent implements OnInit {
  //declare this EventListener in order to listen on it in the parent component.
  @Output() onSelectValue = new EventEmitter<{minDate: Date , maxDate: Date}>();
  today: Date = new Date();


  minDate: Date;
  maxDate: Date;

  constructor(){

  }

  ngOnInit(){

  }

  onChange() {
     this.onSelectValue.emit( {minDate: this.minDate, maxDate:this.maxDate} );
  }

}

Answer 2

Another solution:

Child Component:

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"></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 {

  minDate: Date;
  maxDate: Date;

  constructor(){

  }

  ngOnInit(){

  }

}

Parent component :

import {
  Component,
  OnInit,
  ViewChild,
  Input,
  ElementRef
} 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 #test></calendar>
    <button (click)="showAlert();"></button>
  `,
})

export class FormComponent implements OnInit {

  @ViewChild('test') calendar;

  constructor(){

  }

  ngOnInit(){

  }

  showAlert(){
    alert(this.calendar.minDate);
  }

}

Now i have access of ngModel properties in showAlert() method