Multi-Layout Inwards Angular5

How to implement a multi-layout characteristic inwards Angular5. Influenza A virus subtype H5N1 mutual utilisation instance for this is when you lot convey a dissimilar layout for your world too secured pages. For example, your secured page could convey a carte du jour on the left side. Or you lot convey a page that doesn't require a layout.

Let's supply some examples. Let's enjoin you lot convey the next requirements:

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

The heart too soul characteristic that nosotros postulate to laid is the router configuration. 

1. First, the app.component content must exclusively survive the router-outlet tag.
2. We postulate to exercise a module for the layout components. Why nosotros postulate a split upwardly module for the layout? It's because it's possible to utilisation the layout on dissimilar modules. If nosotros only arrive utilisation of a module, enjoin app.module, thus nosotros cannot utilisation it within secret.module. 

The layout module volition incorporate Blue Planet too secured layout components. These two components are only ordinary element amongst template defined inwards its HTML page. The principal betoken hither is that inside, HTML  tag must survive defined. Remember nosotros convey some other router inwards the app.component? The Router bird has a fashion of dealing amongst this, past times using the children property.

In this section, nosotros volition supply an instance of how a road should survive defined inwards 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 nosotros convey a lazy loaded module route? If nosotros defined it similar below, it volition throw an error.

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

To gear upwardly this, nosotros must define a secret-routing.module too 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, next the same logic of using the children property.

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

@Injectable() export bird RegistrationGuard implements CanActivate {      constructor( someone router: Router, someone route: ActivatedRoute ) {      }      canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable | Promise | boolean {         console.log( 'registration.guard' )          if ( !KeycloakService.auth.loggedIn || !KeycloakService.auth.authz.authenticated ) {             render false;         }          //check grouping         if ( KeycloakService.hasGroup( 'Bride' ) ) {             this.router.navigate( ['/bride/postRegistration'] );          } else if ( KeycloakService.hasGroup( 'Vendor' ) ) {             this.router.navigate( ['/bride/postRegistration'] );         }          render true;     } } 

Here's a link on how I secured the pages: https://ngeblognow.blogspot.com//search?q=secure-angular4-with-keycloak-role-or.