In angular2, how to let child components communicate with each other?

Question

Suppose we have a Parent component(inside it, there is an Animal class that Cat and Dog extends from) with two child components(Cat and Dog), cat and dog button are always in opposite status, click the cat button can make dog button disable, and click the dog button can make the cat button disable. How can I implement it?

@Component
...,
template: `<cat></cat>
           <dog></dog>`
class ParentComponent {
}

export class Animal {
}

@Component
...
class Cat extends Animal {
}

@Component Dog extends Animal {
}

score 4 · Accepted Answer · edited May 23 '17 at 11:54

4

You could use a shared service containing a property of type EventEmitter. This way you will be able to trigger an event and all elements (components) that subscribe on this event will be notified.

The shared service

import {EventEmitter} from 'angular2/core';

export class SharedService {
  constructor() {
    this.selected = new EventEmitter();
  }

  select(elt) {
    this.selected.emit(elt);
  }
}

Sub component implementation (for example the cat one)

import {Component} from 'angular2/core';
import {SharedService} from './app.service';

@Component({
    selector: 'cat',
    template: `
      <div (click)="select()">Cat {{disabled}}</div>
    `
})
export class CatComponent {
  constructor(private service:SharedService) {
    this.disabled = false;
    service.selected.subscribe((elt) => {
      if (elt==='cat') {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    });
  }

  select() {
    this.service.select('cat');
  }
}

Here is a sample implementation for your use case: https://plnkr.co/edit/U7vflPDOUgAG3UCFZG3n?p=preview.

Don't forget to register the provider corresponding at the bootstrap level to share the same instance.

See this question for more details:

Delegation: EventEmitter or Observable in Angular2

edited May 23 '17 at 11:54

Community

1
1

answered Feb 22 '16 at 18:17

Thierry Templier

198,364
44
396
360

Thank you so much @Thierry Templier. But I have a question about how it works? My understanding of your code would be like this: when click dog, it send the information of 'dog', then it listened itself? In my opinion, the following code in Dog class would make more sense: constructor(private service:SharedService) { this.disabled = true; service.selected.subscribe((elt) => { if (elt==='dog') { this.disabled = true; } else { this.disabled = false; } }); } select() { this.service.select('cat'); }. – Ng2-Fun Feb 22 '16 at 21:01
In the above code in Dog class, I changed part of code: if(elt==='dog'), this.service.select('cat'); – Ng2-Fun Feb 22 '16 at 21:09
You're welcome! Both cat and dog components listen to the event so they update their `disable` property accordingly... – Thierry Templier Feb 22 '16 at 22:19
Thanks@Thierry Templier. I got you. – Ng2-Fun Feb 23 '16 at 02:06

score 1 · Answer 2 · answered Feb 22 '16 at 18:19

It depends. If the parent component needs to know when the cat button and dog button are clicked, I would specify input and output properties on the child components. emit() an event on the output property when a click event happens that notifies the parent, which can then modify the parent property that is bound to the input property of the other component.

If the parent doesn't need to know what is going on, then you could use a shared service, as @Thierry just mentioned.

Yes, exactly. In my case here, parent doesn't need to know anything. — Ng2-Fun, Feb 22 '16 at 21:03

In angular2, how to let child components communicate with each other?

2 Answers2

Linked