Skip to main content

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...

Comments

Post a Comment

Popular posts from this blog

Angular components not reloading on route change

Spent a long time wondering why route changes caused strange effects on my component, and found out that it was because my component wasn't reloading at all. I had this assumption that when a route parameter changed (e.g. /projects/1 changed to /projects/2 ) the component for the route would be reloaded. But this is not the default behaviour of the Angular router. The default behaviour of the Angular router is to reuse the route if the configuration is the same (and not reload the component). But we can override this by providing a RouteReuseStrategy to our @NgModule: providers: [ { provide: RouteReuseStrategy, useClass: AARouteReuseStrategy } ] The full custom implementation of the RouteReuseStrategy will then be like this (and it's the shouldReuseRoute method that changes the behaviour so that the component is reloaded on route parameter change): export class AARouteReuseStrategy extends RouteReuseStrategy { shouldDetach(route: ActivatedRou...
1 comment
Read more

My VNC based development environment with Visual Studio Code running on Ubuntu

I've used this setup for my development environment for several years - giving me a developer desktop I can access anywhere. Even from my mobile phone. I've been fixing bugs, writing code and deployed emergency fixes from the bus, train and mountain tops. The setup is based on a lightweight desktop environment. There are lot of alternatives, but I've chosen fluxbox. From a plain AWS Amazon Ubuntu 16.04 ec2 instance I've started like this: sudo apt-get update sudo apt-get install fluxbox Download and extract tigervnc from https://github.com/TigerVNC/tigervnc/releases (I downloaded the binary file from https://bintray.com/tigervnc/stable/tigervnc/1.7.0 named tigervnc-1.7.0.x86_64.tar.gz ) then extract: tar -xvzf tigervnc-1.7.0.x86_64.tar.gz You need to install: sudo apt-get install x11-xkb-utils You need to edit .vnc/xstartup: nano .vnc/xstartup last line replace "twm &" with: fluxbox & Then you can start the...
2 comments
Read more

Intercepting and adjusting SQL generated by Eclipselink JPA

In some cases it might be useful to intercept and adjust the SQL generated by EclipseLink JPA. E.g. if you want to force an index in mysql you need to append force index (myindex) to the table name. If you create a query on the entitymanager: Query q = em.createQuery("select e from MyEntity"); you can cast it to the EclipseLink JpaQuery: JpaQuery jq = (JpaQuery)q; and the JpaQuery gives you access to the EclipseLink DataBaseQuery where you can prepare it before executing it: DatabaseQuery dbQuery = q.getDatabaseQuery(); dbQuery.prepareCall(((org.eclipse.persistence.jpa.JpaEntityManager)em).getActiveSession(),new DatabaseRecord()); You can now get the sql string and add the forced index: dbQuery.setSQLString(dbQuery.getSQLString()+" force index (myindex)"); and finally you can get the resultset using q.getResultList(). If you have parameters in the sql it's a bit more to it. Currently I've only found one option - probably not optimal since the query is transl...
Post a Comment
Read more