Multiple router outlets in Angular

Multiple router outlets in Angular makes it possible to have different sections in the view where the components are determined by the URL, and each outlet can have their own navigation.

Sometimes though - let's say you use named router outlets for the toolbar and the left side menu, you want the main URL to control the components to be showed for all outlets, not just the main outlet. In this case the router outlet configurations should be children on the main path as shown in the config snippet below.

This way the URL /projects/2018/myorganization will show a left side menu and a toolbar in addition to the main content component, while /projects/2018 will only show the toolbar.

If you want the toolbar only to show at the projects root path, but not children then add pathMatch: 'full' .

     RouterModule.forChild([
            {
                path: 'projects',
                children: [
                {
                    path: '',
                    component: ProjectsToolbarComponent,
                    outlet: 'toolbar'
                },
                {
                    path: ':selectedYear',
                    children: [
                        {
                            path: '',
                            component: OrganizationListComponent
                        },
                        {
                            path: ':organization',
                            children: [
                                {
                                    path: '',
                                    outlet: 'leftsidemenu',
                                    component: ContextMenuComponent,
                                    resolve: {
                                        contextmenuparams: ContextMenuParamsResolver
                                    }
                                },
                                {
                                    path: '',
                                    component: ProjectListComponent
                                }
                           
 

etc...