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?

have a look at the @Output() in angular2 bro – Aravind Feb 08 '17 at 07:42 — Aravind, Feb 08 '17 at 07:42

seidme · Accepted Answer · 2021-01-19T23:14:26.987

234

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.

edited Jan 19 '21 at 23:14

answered Feb 08 '17 at 09:57

seidme

12,543
5
36
40

2

Just an example value that demonstrates passing a value from child to parent component. You can pass whatever value you want (startdate, endDate).. – seidme Feb 08 '17 at 10:25
pickDate from my example should fire on click, again, just an example. Use what suits your use case.. – seidme Feb 08 '17 at 11:38
3

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? – seidme Feb 08 '17 at 13:26
what if you want to emit from a route up to its parent, `app.component`? – Omar Mar 26 '18 at 21:23
Is there any way to pass the data from Sub Child to parent Component. Ex. Parent Component -> Child Component -> Sub Child Component – Tejas Savaliya Jul 06 '18 at 07:43
how to send multiple arguments from child to parent? – Sparrow Jun 25 '19 at 06:27
@TejasSavaliya you can send data by using service from Sub Child Component to parent component – WapShivam Jun 26 '19 at 12:13
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? – Savan Gadhiya Mar 06 '20 at 06:45
1

@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. – seidme Mar 06 '20 at 07:05
To have a complete example, can you please add the code about the firing of "pickDate"? – CharlesM Aug 01 '20 at 18:22

Saharis9988 · Answer 2 · 2020-03-28T20:31:51.513

1

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);

edited Mar 28 '20 at 20:31

answered Mar 28 '20 at 20:25

Saharis9988

384
2
5

12

Here you don't explain how to listen in parent component. – Lounis Aug 28 '20 at 08:39

score 0 · Answer 3 · answered Jul 22 '21 at 05:54

0

Most of new version If give some error replace this Line

@Output() parentComponent = new EventEmitter();

Almost it will be solve your error

answered Jul 22 '21 at 05:54

score -4 · Answer 4 · answered Feb 08 '17 at 09:07

-4

Hello you can make use of input and output. Input let you to pass variable form parent to child. Output the same but from child to parent.

The easiest way is to pass "startdate" and "endDate" as input

<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>

In this way you have your startdate and enddate directly in search page. Let me know if it works, or think another way. Thanks

answered Feb 08 '17 at 09:07

Marco Castano

1,114
1
10
25

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 – Marco Castano Feb 08 '17 at 09:11
2

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 – Patricio Vargas Aug 21 '18 at 23:46

How to Pass data from child to parent component Angular

4 Answers4

Linked

Related