How to call an event in parent component from child component?

Question

I have implemented tabs in where i have a form & a button in tab1. I have an event in parent component which makes the current tab deactive and the next tab active. How to call the event in parent component from the child component?

  gotosecondtab(){
this.firsttabactive=false;
this.secondtabactive=true;
}

This is the event in parent component...I want to run this event from child component

onSubmit(): void {  
console.log('you submitted value: ', this.myForm.value); 
//How to call the parent event here
}

I want to run gotosecondtab() event when i execute onSubmit() event...Somebody help me please

score 6 · Accepted Answer · answered Feb 01 '16 at 10:08

6

You can create a custom event in your child component

@Component({
  selector: 'child',
  (...)
})
export class ChildComponent {
  @Output() myevent: EventEmitter;

  constructor() {
    this.myevent = new EventEmitter();
  }

  onSubmit(): void {  
    console.log('you submitted value: ', this.myForm.value); 
    this.myevent.emit();
  }
}

and register on it from the parent component:

@Component({
  template: `
    <child (myevent)="gotosecondtab()"></child>
  `,
   directives: [ ChildComponent ]
  (...)
})
export class ParentComponent {
  (...)

  gotosecondtab() {
  }
}

Hope it helps, Thierry

answered Feb 01 '16 at 10:08

Thierry Templier

198,364
44
396
360

1

In my project I had have to add in the template to the callback function a $event parameter --> (myevent)="gotosecondtab($event) – loose11 Feb 01 '16 at 10:13
1

Yes, agreed if you want to provide a value with the event you trigger (calling `emit` with a value as parameter). I don't see any parameter to the `gotosecondtab` method. That's why I didn't use `$event` ;-) – Thierry Templier Feb 01 '16 at 10:15
I dont want to send any parameters so $event is not required...Thanks Thierry Templier – abhilash reddy Feb 01 '16 at 10:19
@ThierryTemplier obvious +1 for good answer. I have couple of question just for curiosity,1. what `this.myevent.next()` will do? 2. Is there any way by which parent component can call child component function using event in Angular2(like $broadcast in Angular 1.X) – Pankaj Parkar Feb 01 '16 at 10:25
1

@Pankaj Thanks! The next method of EventEmitter is deprecated and does the same thing than the emit one (see https://github.com/angular/angular/blob/master/modules/angular2/src/facade/async.ts#L127). This method follows the API of RxJS and I think that Angular2 wants to provide its own... – Thierry Templier Feb 01 '16 at 10:32
@ThierryTemplier I think you missed to answer my 2nd question. :p – Pankaj Parkar Feb 01 '16 at 10:34
1

@Pankaj I was writting an answer ;-) If it's parent / child component, you can inject children in the parent and use their methods (see http://stackoverflow.com/questions/35100684/how-to-submit-the-form-from-parent-component/35101157#35101157). More generally, you need to leverage a shared service (be careful where you define its associated provider) that contains an EventEmitter as property. Components can register on it and emit from it... – Thierry Templier Feb 01 '16 at 10:39
You could have a look at this great Mark's answer: http://stackoverflow.com/questions/34376854/delegation-eventemitter-in-angular2/34402436 ;-) – Thierry Templier Feb 01 '16 at 10:44
@ThierryTemplier I'll look into both referred answer.. Thanks man.. you are rockstar :) – Pankaj Parkar Feb 01 '16 at 10:48
@ Thierry Templier I want to know what is the best approach to share data between a parent component and its children except input and output.In this plunker http://plnkr.co/edit/2LJL4HxSc74XAyGmQMio?p=preview the changes done in 1st tab should be reflected in 2nd...Is there any approach leaving inputs and outputs? What would be the best approach to share data from parent to child and update data from child to parent.Please suggest me all the approaches – abhilash reddy Feb 01 '16 at 13:03

How to call an event in parent component from child component?

1 Answers1