Angular Course Class Day-4 in English

 

Angular Course Class Day-4

Note:

You have to add following code your project and run check the result.

Angular Material UI Design:

CSS

/* You can add global styles to this file, and also import other style files */

.homepage{

    color:blue;

    text-align:center;

    font-size: 25px;

    margin-top: 180px;

}

html, body { height: 100%; }

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.example-icon {

    padding: 0 14px;

  }

 

  .example-spacer {

    flex: 1 1 auto;

  }

  .mat-drawer-backdrop.mat-drawer-shown

  {

    background-color: #aee4ca;

  }  

  .mat-drawer

  {

    background-color: #fdfdfd;

  }

  .mat-elevation-z5

  {

    position: relative;

    z-index: 2;

  }

.mat-sidenav a:hover{

    color: rgb(254, 106, 180);

}

.loginbutton:hover{

  background-color: rgb(255, 200, 127);

}

.mat-drawer-container

{

  background-color: #c6c2c3fa;

}

.success{

  background-color: rgb(3, 149, 3);

  color:white;

}

Html:

<mat-toolbar color="primary" class="mat-elevation-z5">

  <mat-toolbar-row>

    <span>Angular Material UI Design</span>

    <button type="button" mat-button (click)="drawer.toggle()">

      <mat-icon>menu</mat-icon>

    </button>

    <span class="example-spacer"></span>

    <button mat-icon-button>

      <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">

        settings</mat-icon>

    </button>

    <button mat-icon-button>

      <mat-icon class="example-icon" aria-hidden="false" aria-label="Example delete icon">mail</mat-icon>

 

    </button>

  </mat-toolbar-row>

</mat-toolbar>

 

<mat-sidenav-container>

  <mat-sidenav mode="side" #drawer opened>

    <mat-nav-list style="width:200px">

      <a mat-list-item routerLink="employee" style="height:60px">

        <mat-icon>person</mat-icon> Employee

      </a>

      <a mat-list-item routerLink="customer" style="height:60px">

        <mat-icon> people</mat-icon> Customer

      </a>

      <a mat-list-item routerLink="textile-product" style="height:60px">

        <mat-icon>shopping</mat-icon> Textile Product

      </a>

      <a mat-list-item style="height:60px">

        <mat-icon>girl</mat-icon> HR

      </a>

      <a mat-list-item style="height:60px">

        <mat-icon>person</mat-icon> Admin

      </a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <p style="height:88vh;padding-left: 5vh;padding-right:5vh;">

      <router-outlet>

        <!--this is enable router link  -->

 

      </router-outlet>

    </p>

  </mat-sidenav-content>

</mat-sidenav-container>

 

 

AppModule:

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

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

 

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

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

import { MaterialModule } from './material/material.module';

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

import { MatIconModule } from '@angular/material/icon';

import {MatToolbarModule} from '@angular/material/toolbar';

import {MatSidenavModule} from '@angular/material/sidenav';

import {MatListModule} from '@angular/material/list';

 

import {MatButtonModule} from '@angular/material/button';

import {MatCardModule} from '@angular/material/card';

 

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

import {MatFormFieldModule} from '@angular/material/form-field';

import {MatSelectModule} from '@angular/material/select';

import {MatInputModule} from '@angular/material/input';

import {MatRadioModule} from '@angular/material/radio';

 

import {MatDatepickerModule} from '@angular/material/datepicker';

import { MatNativeDateModule } from '@angular/material/core'

import { FormsModule } from '@angular/forms';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    MaterialModule,MatIconModule,MatToolbarModule,MatSidenavModule,MatListModule,

    BrowserAnimationsModule,

    MatButtonModule,MatCardModule,RouterModule,MatFormFieldModule

    ,MatSelectModule,MatInputModule,

    MatRadioModule,MatDatepickerModule,MatNativeDateModule,FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

App Routing

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

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

import { CustomerComponent } from './customer/customer.component';

import { EmployeeComponent } from './employee/employee.component';

import { ProductComponent } from './product/product.component';

const routes: Routes = [

  {

    path: "employee", component: EmployeeComponent

  },

  {

    path:"customer",component:CustomerComponent

  },

  {

    path:"product",component:ProductComponent

  }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }