Skip to content

How to Pass data from child to parent component Angular

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


 <li class="date">
   <div class="btn-group dropdown" []="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>
  <ul class="dropdown-menu default-dropdown">
     <calendar  ></calendar>
     <button > Cancel </button>
     <button (click)="setDate(category)"> Ok </button>


import 'rxjs/add/observable/fromEvent';
    selector: 'searchDetail',
    templateUrl: './search_detail.component.html',



import { Component, Input} from '@angular/core'; 
    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?


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

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

Emit value on click:

public pickDate(date: any): void {

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

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

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.