Communication between sibling components Angular2

Question

I need to create a click even on one component, that will display sibling component inside their parent component, but not sure how to do it. I understand parent/child communication using Input and Output, but this is not working like that.

So I have this structure:

-Parent Component
-- Child One
-- Child Two

So they are in my parent component's html,

<app-child-one></app-child-one>
<app-child-two></app-child-two>

Child One and Child Two components are both popups, so on a click in Parent component I display the Child One component (popup now), and inside that popup I have button Next, that should show the Child Two component.

I can't nest Child Two inside Child One since there are many more popups and I would like to keep it somewhat organized.

Here's my code:

Parent component:

<app-one *ngIf="popupOne" [(popupOne)]="popupOne"></app-one>
<app-two *ngIf="popupTwo" [(popupTwo)]="popupTwo"></app-two>

both popupOne and popupTwo are set to false.

Component one:

Input() popupOne: boolean; 
Input() popupTwo: boolean; 
Output() popupOneChange= new EventEmitter<boolean>(); 
Output() popupTwoChange= new EventEmitter<boolean>(); 
close() { this.popupOne.emit(false); } 
openPopupTwo() { this.popupTwoChange.emit(true); }

Component Two:

Input() popupTwo: boolean;

create a service angular.io/docs/ts/latest/tutorial/toh-pt4.html — Ankit Saroch
"I understand parent/child communication using Input and Output, but this is not working like that" - why not? the first child says to the parent that he's done; the parent will then switch to the second child. — Cosmin Ababei
@CosminAbabei I tried it, in parent I set to variable to false, input it in child one and output the change, input it inside te child two = not working — Nemanja G
@grabnem Then there's something wrong in your code. It should work. — Cosmin Ababei

Cosmin Ababei Cosmin Ababei · Accepted Answer · 2017-05-30T10:08:04

appOne doesn't have the popupTwo variable registered as output on it.

Adding it, as <app-one *ngIf="popupOne" [(popupOne)]="popupOne" [popupTwo]="popupTwo"></app-one>, should solve your problem.

Communication between sibling components Angular2

1 Answers