Tech-Today

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

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

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

First, the app.component content must only be the router-outlet tag.
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://czetsuya-tech.blogspot.com/2017/11/secure-angular4-with-keycloak-role-or.html.

- React Todo With Middleware
This blog post explains the updates done to React Todo app such as adding Middlewares, Enhancers, API calls, etc. Things to notice: Naming convention, inspired from angular I suffixed the files with .x.js depending on the type. For example .container.js.I...

- Secure Angular4 With Keycloak Role Or Group
Demo template is available for sale for $50. You can send payment via skype at: [email protected] This article will be an extension of an existing one: http://czetsuya-tech.blogspot.com/2017/10/how-to-secure-angular-app-using.html. Normally in the...

- Secure Angular4 App With Keycloak
Demo template is available for sale for $50. You can send payment via skype at: [email protected] Disclaimer: This is not a tutorial on how to setup an Angular^4 project, nor are we going to discuss how to setup a Keycloak server. Needless to say, you...

- How To Signin To Keycloak Using Google
There are 3 set of steps that we must follow in order to come up with a web project that will allow us to login using google's identity provider. Set 1 - Create a google applicationCreate a google application at https://console.developers.google.com...

- How To Protect Your Page Using Webfilter In Javaee
This tutorial is to be use in conjunction with picketlink. Normally we want some pages to be accessible only after a user has logged in. In this case we need a real protection filter. The class below filters a url path and check if there's a logged...

Tech-Today