Passing information from 2 children component to the parent component

Question

I have a parent component(A) and 2 children components(B,C). The parent component contains the basic layout of the page, which doesn't change across all the layouts. I need to swap the contents in the middle of the page when the user select different button.

Step 1: Click button from parent component A --> refresh to B Step 2: User click on button from child component B --> refresh to C

Since I have to be persistent to keep the basic layout from my component A, what are some ways to approach Step 2?

A lot of different solutions provided here: https://angular.io/docs/ts/latest/cookbook/component-communication.html — Fredrik Lundin, Feb 17 '17 at 06:30

score 1 · Answer 1 · answered Feb 17 '17 at 06:30

You need to use routing for it. In the component A you can write your code and put <router-outlet></router-outlet> in the markup. And for component A you can declare routing like

const routes = [
   { path: '', component: 'AComponent', children: [
     {path: '', redirectTo: 'b', pathMatch: 'full'},
     {path: 'b', component: 'BComponent'},
     {path: 'c', component: 'CComponent'},
   ]}  
]

And on the button click, you need to go to appropriate route by [routerLink]

Passing information from 2 children component to the parent component

1 Answers1