Angular 2 dynamic nested router outlets

Question

I have a scenario in which I have to copy the way quick edit works on wordpress.

Based on what I understand you can do on router-outlet like this

<div>
    <router-outlet></router-outlet>
    <router-outlet name="quick"></router-outlet>
</div>

and you can use it by entering localhost:4200/users(quick:quick-edit).

Now my scenario is I want to load all the users on a grid. Under the grid There will be 3 small buttons Edit | Quick Edit | Trash

When I clicked Edit it will call the edit on a new page. So using router-outlet
/router-outlet only works fine however if I click Quick Edit it will still show the users in grid and change the selected row into a quick edit form. Based on that scenario it should look like this

<router-outlet>
     <table>
         <tr>

         </tr>
         <router-outlet name="quick"></router-outlet>
     </table> <!-- It will be loaded once quick edit is pressed -->
</router-outlet>

but it seems it is not possible? Any idea or work around to make it working?

this can be done in multiple ways but how separately your had your components? quick-edit and edit are same components? — Aravind
Edit will load the FormUserComponent, while Quick Edit will load FormQuickUserComponent including the user grid, it will then hide the row where I click Quick Edit and show the quick edit form — user3287504

Aravind Aravind · Accepted Answer · 2017-04-17T23:49:26

When the edit and quick edit both are same you need not use a separate router inside the table component. But you can handle it as

The main router outlet

<router-outlet></router-outlet>

The table component should be as

<table>
    <tr *ngFor="let user of users"></tr>
    <quick-edit-component *ngIf="user.quickEdit" [user]="user"> </quick-edit-component>
</table>

The complete edit can be routed using the url.

URL : ->

localhost:2000/users              ------------users table view

localhost:2000/users/edit/:id     ------------users full edit view

the quick edit will have no route path

Angular 2 dynamic nested router outlets

1 Answers