Angular multi-layer using lazy loading feature module

Angular always render all component during first component is loading. It slows the process. We need a way that will render only that part of component which I am visiting now. We can do it using lazy loading feature modules. On the other hand, sometimes we need two different layouts to show different design patterns of our system. Suppose the authentication layout will not show any navigation unless a form. But other layouts will show the navigation. We can fix these issues in an angular multi-layer using a lazy loading feature module. Start an angular project named dashmat using following command.

ng new dashmat --routing=true --skipGit=true --style=scss

The above command will create a project dashmat with the app-routing module, scss as style, skipping the git index.

Now we add two different components for layout.
1. Authentication layout as auth-layout,
2. Base Layout.
Use the following commands to generate two components in app/component/layout:

ng g c component/layout/baseLayout
ng g c component/layout/authLayout

Now declare these two layouts in the app.module.ts:

import {AuthLayoutComponent} from './layout/auth-layout/auth-layout.component';
import {BaseLayoutComponent} from './layout/base-layout/base-layout.component';
declarations: [
...............................
    AppComponent,
    AuthLayoutComponent,
    BaseLayoutComponent
...............................
  ],

In HTML of both layout module, place the <router-outlet></router-outlet> directive at a place where you want to show the dynamic content. Suppose we will show a navigation bar at the top of the authLayoutComponent and there will not show any navigation unless a login form in BaseLayoutComponent. So we place the <router-outlet></router-outlet> in both cases in different way. Let’s see first for auth-layout.component.html:

<div class="container">
  <div class="row">
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-6 col-xs-offset-1 col-sm-offset-2 col-md-offset-3 col-lg-offset-3">
      <div class="box">
        <mat-card><router-outlet></router-outlet></mat-card>
      </div>
    </div>
  </div>
</div>

79 Views

About Author

Nasir

Welcome to CodeKit.xyz. I am working in an automation company as a software engineer. From the deep thirst of learning, I have developed this platform.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>