0

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;
Cosmin Ababei
  • 7,003
  • 2
  • 20
  • 34
Nemanja G
  • 1,760
  • 6
  • 29
  • 48
  • 1
    create a service https://angular.io/docs/ts/latest/tutorial/toh-pt4.html – Ankit Saroch May 30 '17 at 07:30
  • "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 May 30 '17 at 07:35
  • @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 May 30 '17 at 07:37
  • https://stackoverflow.com/questions/41421746 – ranakrunal9 May 30 '17 at 07:42
  • @grabnem Then there's something wrong in your code. It should work. – Cosmin Ababei May 30 '17 at 08:00
  • @CosminAbabei are you sure? i checked my code 10x it is not any different than other things ive done – Nemanja G May 30 '17 at 08:08
  • @grabnem I don't see why not. Can you paste your code here? – Cosmin Ababei May 30 '17 at 08:09
  • @CosminAbabei Parent component: both popupOne and popupTwo are set to false. Component one: Input() popupOne: boolean; Input() popupTwo: boolean; Output() popupOneChange= new EventEmitter(); Output() popupTwoChange= new EventEmitter(); close() { this.popupOne.emit(false); } openPopupTwo() { this.popupTwoChange.emit(true); } Component Two: Input() popupTwo: boolean; This is it – Nemanja G May 30 '17 at 08:17

1 Answers1

1

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.

Cosmin Ababei
  • 7,003
  • 2
  • 20
  • 34