* Create a new project in your working folder

> ng new MyApp –skip-tests

> cd MyApp

* Add the angular material to your project with cdk and animations to the current working project.

> npm install @angular/material

> npm install @angular/cdk

> npm install @angular/animations

> code .

It will open the project in the vs code.

·        Go to explorer and select Styles.css

@import ~@angular/material/prebuilt-themes/indigo-pink.css

·        Go to terminal and add the following components

   ng g c about –flat

     ng g c tutorials –flat

  ng g c login –flat

  ng g c dashboard –flat

  ng g c books –flat

·        Go to about.component.html

Add some content in the about html like

<p>This is about component</p>

·        Go login.component.ts

import { FormControl,FormGroup,Validators} from "@angular/forms";

import {Router} from "@angular/router";

·        Inside the class of login.component.ts

  myForm:FormGroup;

  msg:string;

  constructor(private _router:Router)

  {

    this.myForm=new FormGroup({

      username:new FormControl("",[Validators.required]),

      password: new FormControl("",[Validators.required])

    });

  }

authenticate()

  {

    if(this.myForm.value.username=="kishore" && this.myForm.value.password=="kishore")

    //validate user account

    {

      localStorage.setItem("name",this.myForm.value.username);

      localStorage.setItem("token","Havi");

      this._router.navigate(['/dashboard']);

      //redirecting user to dashboard route

    }

    else

    {

      this.msg="Invalid Name or Password";

    }

  }

·        Go to Login.component.html

<style>

    span{color:red;font-size:large;}

</style>

<form [formGroup]="myForm">

    <div style="margin:15px">

        <input formControlName="username" placeholder="username">

        <span *ngIf="myForm.controls.username.invalid">Enter UserName</span>

        <br>

        <input formControlName="password" placeholder="Password" type="password">

        <span *ngIf="myForm.controls.password.invalid">Enter Password</span>

        <br>

        <input type="button" value="Login" (click)="authenticate()">

        <br>

        {{msg}}

    </div>

</form>

·        Go to dashboard.component.ts

username:string;

  constructor()

  {

    this.username=localStorage.getItem("name");

  }

·        Go to Dashboard.component.html

  <h5>Welcome to {{username}}</h5>

·        Go to Tutorails.component.html

 <h5>Tutorials Info</h5>

·        Go to Books.component.html

 <h5>Books Info</h5>

·        Go to app.component.html [remove the default content]

<h3>My Caption</h3>

<mat-toolbar color="primary">

  <mat-toolbar-row>

    <a mat-button routerLink="about">About</a>

    <a mat-button routerLink="login">Login</a>

    <a mat-button routerLink="tutorials">Tutorials</a>

    <a mat-button routerLink="books">Books</a>

  </mat-toolbar-row>

</mat-toolbar>

<hr>

<router-outlet></router-outlet>

·        Go to Terminal create router guard Services

    > ng g s  authguard –flat

    >ng g s confirmguard –flat

·        Go to authguard.service.ts

import { Injectable } from '@angular/core';

import { CanActivate} from "@angular/router";

@Injectable({

  providedIn: 'root'

})

export class AuthguardService implements CanActivate{

  canActivate():boolean

  {

    if(localStorage.getItem("token")=="Havi")

    return true;

    else

    return false;

  }

  constructor() { }

}

·        Go to confirmguard.service.ts

import { Injectable } from '@angular/core';

import {CanDeactivate} from "@angular/router";

import {LoginComponent} from "./login.component";

@Injectable({

  providedIn: 'root'

})

export class ConfirmguardService implements CanDeactivate<LoginComponent>

 {

  canDeactivate(lc:LoginComponent):boolean

  {

    if(lc.myForm.valid)

    return true;

    else{

      if(window.confirm("Do you want to Discard Changes..?"))

      return true;

      else

      false;

    }

  }

 

  constructor() { }

}

·        Go to app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AboutComponent } from './about.component';

import { TutorialsComponent } from './tutorials.component';

import { LoginComponent } from './login.component';

import { DashboardComponent } from './dashboard.component';

import { BooksComponent } from './books.component';

import {MatToolbarModule} from "@angular/material";

import {FormsModule,ReactiveFormsModule} from "@angular/forms";

import {Routes,RouterModule} from "@angular/router";

import {AuthguardService} from "./authguard.service";

import {ConfirmguardService} from "./confirmguard.service";

const routes:Routes=[

  {path:"about",component:AboutComponent},

  {path:"login",component:LoginComponent,canDeactivate:[ConfirmguardService]},

  {path:"dashboard",component:DashboardComponent},

  {path:"tutorials",component:TutorialsComponent,canActivate:[AuthguardService]},

  {path:"books",component:BooksComponent,canActivate:[AuthguardService]},

]

@NgModule({

  declarations: [

    AppComponent,

    AboutComponent,

    TutorialsComponent,

    LoginComponent,

    DashboardComponent,

    BooksComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,MatToolbarModule,FormsModule,ReactiveFormsModule,RouterModule.forRoot(routes)

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }