This angular 9 tutorial help to create multiple layouts for your project. You can create different layouts for guests, logged-in and admin users and use them as per routes information.
I will create two layouts one for guest which have access to the login, register page and another layout for the registered user which access to home, dashboard etc page.
I am extending my previous tutorial to convert a simple bootstrap theme into angular 5 layout using bootstrap. I will create the following component and module here.
- I will create home-layout component into
shared/folder. - I will create login-layout component into
shared/folder. - I will create login component into
app/folder. - Created
app.routes.tsfile and added routes intoapp/folder. - Modified
app.module.tsfile and added route information.
Create Login Component
First We will create login component using angular CLI.
$src/app> ng generate component login
Open src/app/login/login.component.html file and added below code into this file,
<div class="col-md-6 col-md-offset-4"> <div class="container"> <div class="col-md-6 col-md-offset-4"> </div> <div class="login-wrapper"> <div class="box"> <div class="content-wrap"><form> <h6>Sign In</h6> <div class="social"><a class="face_login" href="#"> <span class="face_icon"> <img src="assets/images/okta.png" alt="fb" width="20"> </span> <span class="text">Sign in with OKTA</span> </a> <div class="division"><hr class="left">or<hr class="right"></div> </div> <input class="form-control" type="text" placeholder="E-mail address"> <input class="form-control" type="password" placeholder="Password"> <div class="action"><a class="btn btn-primary signup" href="index.html">Login</a></div> <div class="already"> <p>Don't have an account yet?</p> <a href="signup.html">Sign Up</a></div> </form></div> </div> </div> </div> </div>
We don’t need to change login.component.ts file, just make sure selector value must have 'app-login'.
Create Guest Layout for Login/Register page
We will create login-layout component using angular CLI.
$src/app/shared/> ng generate component login-layout
Open src/app/shared/login-layout/login-layout.component.html file and add below code into this file, This file does not have a sidebar component that will show the only logged-in user.
<div class="header"> </div> <div class="col-md-10"> </div> <footer></footer>
We don’t need to change login-layout.component.ts file.
Create Home Layout for Logged-in User
We will create home-layout component using angular CLI.
$src/app/shared/> ng generate component home-layout
Open src/app/shared/home-layout/home-layout.component.html file and add below code into this file, This file will have a sidebar component that will show the registered user.
<div class="header"> </div> <div class="row"> <div class="col-md-2"> <div class="sidebar content-box" style="display: block;"> </div> </div> <div class="col-md-10"> </div> </div> <footer></footer>
We don’t need to change login-layout.component.ts file.
Routes for Multiple Layout In Angular 5
I have already shared a tutorial about Angular 2/4 Routing and Navigation. We will define two separate blocks of routes for the Guest user and Registered users. The guest user will use LoginLayout and the Registered user will use HomeLayout. We will create app.routes.ts file in app/ folder. We will add below code into this file.
import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { LoginComponent } from './login/login.component'
import { HomeComponent } from './home/home.component'
import { LoginLayoutComponent } from './shared/login-layout/login-layout.component';
import {SidebarComponent } from './shared/layout/sidebar/sidebar.component';
import {HeaderComponent } from './shared/layout/Header/header.component';
import { HomeLayoutComponent } from './shared/home-layout/home-layout.component';
export const AppRoutes: Routes = [
{
path: '',
component: LoginLayoutComponent,
children: [
{ path: '', component: LoginComponent, pathMatch: 'full'},
{ path: 'login', component: LoginComponent }
]
},
{
path: '',
component: HomeLayoutComponent,
children: [
{ path: 'home', component: HomeComponent, pathMatch: 'full'}
]
},
{ path: '**', redirectTo: '' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
We will modify app.module.ts file, and added LoginLayout, HomeLayout and app.routes module into this file.
import { NgModule,ModuleWithProviders } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LoginLayoutComponent } from './shared/login-layout/login-layout.component';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
import { FooterComponent } from './shared/layout/footer/footer.component';
import { HeaderComponent } from './shared/layout/header/header.component';
import { SidebarComponent } from './shared/layout/sidebar/sidebar.component';
import { LoginComponent } from './login/login.component';
import { routing } from './app.routes';
import { HomeLayoutComponent } from './shared/home-layout/home-layout.component'
const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });
@NgModule({
declarations: [
AppComponent,
FooterComponent,
HeaderComponent,
SidebarComponent,
LoginComponent,
LoginLayoutComponent,
HomeLayoutComponent
],
imports: [
BrowserModule,
rootRouting,
HomeModule,
routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
We will add selector value is ‘app-root’ into app.component.ts file.We will refer this selector into index.html file.
Loading
Conclusion:
We have created multiple layout into this angular 5 tutorial, You can use same process to add multiple layout for angular 2 and angular 4 as well.Created routing file to routes Guest user page and registered user page.
