How to Pass data from child to parent component Angular

Question

I have a component named search_detail which has another component inside it named calendar,

SearchDetail_component.html

 <li class="date">    <div class="btn-group dropdown" [class.open]="DatedropdownOpened">    <button type="button" (click)="DatedropdownOpened = !DatedropdownOpened"   class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'">       Date <span class="caret"></span>   </button>   <ul class="dropdown-menu default-dropdown">      <calendar  ></calendar>      <button > Cancel </button>      <button (click)="setDate(category)"> Ok </button>    </ul>                              </div> </li> 

SearchDetail_component.ts

import 'rxjs/add/observable/fromEvent'; @Component({     selector: 'searchDetail',     templateUrl: './search_detail.component.html',     moduleId: module.id  }) 

Calendar.component.ts

import { Component, Input} from '@angular/core';  @Component({     moduleId:module.id,     selector: 'calendar',     templateUrl: './calendar.component.html' })      export class CalendarComponent{       public fromDate:Date = new Date();           private toDate:Date = new Date();       private events:Array<any>;       private tomorrow:Date;       private afterTomorrow:Date;       private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];       private format = this.formats[0];       private dateOptions:any = {         formatYear: 'YY',         startingDay: 1       };       private opened:boolean = false;        public getDate():number {         return this.fromDate.getDate()  || new Date().getTime();       }     } 

I want to access the startdate and enddate on click of the ok button in the search detail page. how can i do?

Answer 1

Register the EventEmitter in your child component as the @Output:

@Output() onDatePicked = new EventEmitter<any>(); 

Emit value on click:

public pickDate(date: any): void {     this.onDatePicked.emit(date); } 

Listen for the events in your parent component's template:

<div>     <calendar (onDatePicked)="doSomething($event)"></calendar> </div> 

and in the parent component:

public doSomething(date: any):void {     console.log('Picked date: ', date); } 

It's also well explained in the official docs: Component interaction.