Create angular layout using angular material api

Follow the below steps to build layout component:-

ng add @angular/cli




ng nlew fms




ng add @angular/material




ng add @angular/cdk




ng add @angular/material




ng generate @angular/material:nav mainLayout

main-layout.component.html

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"

      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

      [mode]="(isHandset$ | async) ? 'over' : 'side'"

      [opened]="!(isHandset$ | async)">

    <mat-toolbar>Menu</mat-toolbar>

    <mat-nav-list>

      <a mat-list-item href="#">Link 1</a>

      <a mat-list-item href="#">Link 2</a>

      <a mat-list-item href="#">Link 3</a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">

      <button

        type="button"

        aria-label="Toggle sidenav"

        mat-icon-button

        (click)="drawer.toggle()"

        *ngIf="isHandset$ | async">

        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

      </button>

      <span>fms</span>

    </mat-toolbar>

    

  </mat-sidenav-content>

</mat-sidenav-container>

main-layout.component.ts

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

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

import { Observable } from 'rxjs';

import { map } from 'rxjs/operators';

@Component({

  selector: 'app-main-layout',

  templateUrl: './main-layout.component.html',

  styleUrls: ['./main-layout.component.css']

})

export class MainLayoutComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)

    .pipe(

      map(result => result.matches)

    );

  constructor(private breakpointObserver: BreakpointObserver) {}

}

main-layout.component.css

.sidenav-container {

height: 100%;

}

.sidenav {

width: 200px;

}

.sidenav .mat-toolbar {

background: inherit;

}

.mat-toolbar.mat-primary {

position: sticky;

top: 0;

z-index: 1;

}

main-layout.component.spec.ts

import { LayoutModule } from '@angular/cdk/layout';

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

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

import {

  MatButtonModule,

  MatIconModule,

  MatListModule,

  MatSidenavModule,

  MatToolbarModule,

} from '@angular/material';

import { MainLayoutComponent } from './main-layout.component';

describe('MainLayoutComponent', () => {

  let component: MainLayoutComponent;

  let fixture: ComponentFixture<MainLayoutComponent>;

  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [MainLayoutComponent],

      imports: [

        NoopAnimationsModule,

        LayoutModule,

        MatButtonModule,

        MatIconModule,

        MatListModule,

        MatSidenavModule,

        MatToolbarModule,

      ]

    }).compileComponents();

  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(MainLayoutComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });

  it('should compile', () => {

    expect(component).toBeTruthy();

  });

});