The Techies' pub

Angular 2 – Multiple router outlets

Hope you are all well. This post is one of the most requested ones by our friends. It primarily deals with how to create multiple router outlets in your Angular 2 app and use them effectively with the help of child routes.

I have created two routes. One for the home component (which will be loaded by default) and the other for second component which will simply be a screen. The second component has two children routes. We will be seeing how that is handled in our app.

Now I have created a navbar using the materializecss framework with the help of angular2-materialize library. You can use that or any other framework that you feel comfortable with for UI.

Now as you can see we have a navbar with a couple of links. One will be used as a dummy and the second one will link to our second screen. We have our primary <router-outlet> below the navbar. In other words navbar will be shown on all pages.

Now open up second.component.html file and add the below two lines.

1

2

<router-outlet name="firstchild"></router-outlet>

<router-outlet name="secondchild"></router-outlet>

Note that the router-outlets have separate names; firstchild and secondchild respectively.

Looking back at the code in app.component.html, I believe you could get the flow now. We are not only specifying the route to navigate to in [routerLink] directive, we are also specifying which component should be loaded in which router outlet respectively.

The differentiation between the router outlets is handled using the names.

Now don’t forget to reference the app.routing.ts file in your app.module.ts and then run the code using ng serve.

You will see that in the second page, there are two messages namely firstchild works! and secondchild works!. This simply illustrates the fact that both the components are loaded into the separate router-outlets respectively.

Okay. Now you might wonder where this technique is used in app-building.

Just to show you an example. Let’s have a couple of buttons in the firstchild and see how changes can be triggered in the secondchild.

Open up firstchild.component.html and add the below code.

1

2

<button(click)="callfirst()">One</button>

<button(click)="callsecond()">Two</button>

This will simple add two buttons. Now add the corresponding code for these two functions in firstchild.component.ts file.

We are simply using ActivatedRoute to extract the params from the URL and then displaying it in our screen. (Which is the one that gets loaded into the router-outlet with the name secondchild).

Open up secondchild.component.html and change the code as shown below.

1

<h1>{{currentvalue}}</h1>

Now simply run the app using ng serve.

Navigate to second and you would see a screen as shown below.

If you click on the buttons the value changes accordingly.

So, technically we are able to make changes in the secondchild component in the same screen through actions in the firstchild component.

Now, this is just a simple example. But imagine the uses for this technique. You can have more router-outlets and child routes (Not too much, or it will become a head ache in itself) and then display different views, with different data in the same screen at the same time. You could also change the data in the views without reloading the whole screen. This opens up a new possibility for an optimised method of view loading (instead of using the traditional ng-hide/ng-show).

Child routes and named router outlets are an excellent feature of Angular 2 which I feel would be much useful in your apps once you master the technique. I sincerely hope this post helped you to get started.

This post was heavily inspired by a post written by Lukas Ruebbelke on his blog. You can view the article by clicking here.

Thanks to Lukas for teaching me this, so that now I could share my knowledge and understanding with a lot of my readers.

Hope this helped you guys. Kindly share it with someone so that it might help them too.