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?

Solution 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.

Solution 2

In order to send data from child component create property decorated with output() in child component and in the parent listen to the created event. Emit this event with new values in the payload when ever it needed.

@Output() public eventName:EventEmitter = new EventEmitter();

to emit this event:

this.eventName.emit(payloadDataObject);

Comments

[Aravind]

have a look at the @Output() in angular2 bro

[Marco Castano]

Ok...in this case I think the only way is to bind an event from calendar to search. And when startdate and enddate gets selected fire this event on search component

[seidme]

Just an example value that demonstrates passing a value from child to parent component. You can pass whatever value you want (startdate, endDate)..

[seidme]

pickDate from my example should fire on click, again, just an example. Use what suits your use case..

[seidme]

How about making an object to group those two dates, something like: { startDate: startDate, endDate: endDate }, and pass it at once, instead of introducing two emitters?

[Omar]

what if you want to emit from a route up to its parent, app.component?

[Tejas Savaliya]

Is there any way to pass the data from Sub Child to parent Component. Ex. Parent Component -> Child Component -> Sub Child Component

[Patricio Vargas]

The question is how to pass data from child to parent component. In you example you mention Output and Input but only provided an example of Input which is for parent child communication

[Sparrow]

how to send multiple arguments from child to parent?

[WapShivam]

@TejasSavaliya you can send data by using service from Sub Child Component to parent component

[Savan Gadhiya]

In my case, I don't have button click event, it is just an input box. In that case, how am I supposed to emmit an event?

[seidme]

@SavanGadhiya Input events are no different then other events. Instead of binding (click)=".." event on the element, you'd bind (input)=".." event for example, and emit that event further to the parent component.

[CharlesM]

To have a complete example, can you please add the code about the firing of "pickDate"?

[Lounis]

Here you don't explain how to listen in parent component.