Multi-layout in Angular5

How to implement a multi-layout feature in Angular5. A common use case for this is when you have a different layout for your public and secu...

How to implement a multi-layout feature in Angular5. A common use case for this is when you have a different layout for your public and secured pages. For example, your secured page could have a menu on the left side. Or you have a page that doesn't require a layout.

Let's provide some examples. Let's say you have the following requirements:

1. Plain pages that don't require any layout.
2. Public pages.
3. Secured pages.

The core feature that we need to set is the router configuration. 

1. First, the app.component content must only be the router-outlet tag.
2. We need to create a module for the layout components. Why we need a separate module for the layout? It's because it's possible to use the layout on different modules. If we just make it part of a module, say app.module, then we cannot use it inside secret.module. 

The layout module will contain the public and secured layout components. These 2 components are just ordinary component with template defined in its HTML page. The main point here is that inside, HTML  tag must be defined. Remember we have another router in the app.component? The Router class has a way of dealing with this, by using the children property.

In this section, we will provide an example of how a route should be defined in app-routing.

Public pages layout:

{
 path: '',
 component: PublicPageLayoutComponent,
 children: [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent}
 ]
}

Secured pages layout:

{
 path: '',
 component: SecuredSiteLayoutComponent,
 children: [
  { path: '', component: AdminComponent, pathMatch: 'full' },
  { path: 'admin', component: AdminComponent}
 ]
}

Now, what if we have a lazy loaded module route? If we defined it like below, it will throw an error.

{
 path: 'secret',
        component: SecuredSiteLayoutComponent,
 loadChildren: 'app/module/secret/secret.module#SecretModule'
}

To fix this, we must define a secret-routing.module and defines some routes similar to app-routing.

const routes: Routes = [
    {
        path: '',
        component: SecuredSiteLayoutComponent,
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent }
        ]
    },
    {
        path: 'postRegistration',
        component: SecuredSiteLayoutComponent2,
        children: [
            { path: '', component: PostRegistrationComponent }
        ]
    }
];

Basically, following the same logic of using the children property.

As a bonus, we are adding a guard that navigates depending on the role of a newly registered user. I used this to redirect the user to a configuration page.

@Injectable()
export class RegistrationGuard implements CanActivate {

    constructor( private router: Router, private route: ActivatedRoute ) {

    }

    canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable | Promise | boolean {
        console.log( 'registration.guard' )

        if ( !KeycloakService.auth.loggedIn || !KeycloakService.auth.authz.authenticated ) {
            return false;
        }

        //check group
        if ( KeycloakService.hasGroup( 'Bride' ) ) {
            this.router.navigate( ['/bride/postRegistration'] );

        } else if ( KeycloakService.hasGroup( 'Vendor' ) ) {
            this.router.navigate( ['/bride/postRegistration'] );
        }

        return true;
    }
}

Here's a link on how I secured the pages: http://toztech.blogspot.com/2017/11/secure-angular4-with-keycloak-role-or.html.