Two Angular2 components on the same page

Question

I have to say I just started to look into Angular2 and it seems really interesting.

I stumbled on this problem today where I configured routes like this:

{
    path: 'artists',
    component: ArtistComponent,
    children: [
        { path: ':id', component: ArtistsDetailComponent },
        { path: '', component: ArtistsHomeComponent },
    ]
},

Idea is to show artists list (ArtistComponent) on the left and when clicked, there will be this detailed view (ArtistsDetailComponent) opened on the right side.

ArtistsComponent template has in it so when navigating to /artists/:id I really do see list of articles on the left and detailed view on the right (in this router-outlet).

All good except I need to have these two components communicating with each other, so when I make a change in detail view, it should be changed in the list.

When googling, I see that I should use component selector together with variable mapping info:

<artist-detail [artist]="selectedArtist"></artist-detail>

but then I get an error saying that I don't have router-outlet and Angular don't know where to put ArtistsDetailComponent view...

So specialists, please help...! :)

This sounds like a time when you might need to use multiple outlets Not sure if this is exactly what you are looking for and it is in a troubling experimental stage currently, but it might be worth your time to look into — Jarod Moser

smyk smyk · Accepted Answer · 2016-07-13T21:09:08

There are two contradictory approaches. Either you use child routes, in which case the detail component should be embedded into the <router-outlet>, or you embed your details component 'manually', as <artist-detail>. Since you tried to mix them (child routes and manual embedding in the template), the router complained it could not find outlet to put the child-route component into.

So either you give up the child routes and then you can pass the params with [] syntax, or you stick with the child routes and then the details component should extract id from the route parameters and collect the details. How you collect the details depends on your model. I keep the application state in Redux, and get if from there. You can use a shared service as well.

Two Angular2 components on the same page

1 Answers