Angular flex-layout navigation with sidenav toggle error

Question

When I try to access sidenavbar on min-width:960px, the sidenav shows up and disappears within a second. In the console error log it shows like: I don't know where I have gone wrong. Can someone please suggest?

Th header file is followed underneath:

header.component.html

<div style="height: 100vh;">
    <mat-toolbar color="primary">
      <span>Test App2</span>
  
      <span class="example-spacer"></span>
  
      <div fxShow="true" fxHide.lt-md="true">
        <!-- The following menu items will be hidden on both SM and XS screen sizes -->
        <a href="#" mat-button>Menu Item 1</a>
        <a href="#" mat-button>Menu Item 2</a>
        <a href="#" mat-button>Menu Item 3</a>
        <a href="#" mat-button>Menu Item 4</a>
        <a href="#" mat-button>Menu Item 5</a>
        <a href="#" mat-button>Menu Item 6</a>
      </div>
  
      <div fxShow="true" fxHide.gt-sm="true" class="hamburger">
        <a href="/" (click)="sidenav.toggle()">
          <svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
        </a>
      </div>
      \87cx23gh3 v   
    </mat-toolbar>
  
    <mat-sidenav-container fxFlexFill class="example-container">
      <mat-sidenav #sidenav fxLayout="column">
        <div fxLayout="column">
          <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>
          <a href="#" mat-button>Menu Item 1</a>
          <a href="#" mat-button>Menu Item 2</a>
          <a href="#" mat-button>Menu Item 3</a>
          <a href="#" mat-button>Menu Item 4</a>
          <a href="#" mat-button>Menu Item 5</a>
          <a href="#" mat-button>Menu Item 6</a>
        </div>
      </mat-sidenav>
      <mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
    </mat-sidenav-container>
  </div>

header.component.css

.hamburger {
    right: 0;
    display: block;
    margin-top: 10px;
    padding: 1em;
    position: absolute;
}

.example-icon {
    padding: 0 14px;
  }
  
  .example-spacer {
    flex: 1 1 auto;
  }

header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { HomeComponent } from './pages/home/home.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  { 
    path: 'home', 
    component: HomeComponent 
  },
  { 
    path: 'footer', 
    component: FooterComponent 
  },
  { 
    path: 'header', 
    component: HeaderComponent 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoginComponent } from './pages/login/login.component';
import { HomeComponent } from './pages/home/home.component';
import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from "@angular/flex-layout";
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { BodyComponent } from './components/body/body.component';
import { MatMenuModule } from '@angular/material/menu';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';

 

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    HeaderComponent,
    FooterComponent,
    BodyComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    FlexLayoutModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatToolbarModule,
    MatSidenavModule
  ],
  providers: [],
  bootstrap: [AppComponent, HeaderComponent]
})
export class AppModule { }