How to make side navigation stay and content alone disappear after selecting an option from navigation bar in angular 8?

Question

I have a home page where there is no navigation bar. Once after logging in I have a fixed side navigation bar. When I select some option from the side nav bar, I want the nav bar to remain but the content to disappear and make the content of the selected component to display. I have tried using *ngIf but the nav bar also disappears along with the content. Since I am new to angular, help would be appreciated.

admin.html:

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
          <mat-icon>library_books</mat-icon>
          <span>Books</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu="matMenu" class="my-menu">
              <button mat-menu-item class="list">
                  <mat-icon>library_books</mat-icon>
                <span>Book List</span>
              </button>
              <button mat-menu-item class="list" routerLink="/addBook" (click)="showPage()"> 
              <mat-icon>add_circle</mat-icon>
                <span>Add Book</span>
              </button>
              <button mat-menu-item class="list" routerLink="/editBook" (click)="showPage()">
                  <mat-icon>edit</mat-icon>
                <span>Edit Book</span>
              </button>
              <button mat-menu-item class="list">
                  <mat-icon>delete</mat-icon>
                  <span>Delete Book</span>
                </button>
            </mat-menu>
      </button>
      <mat-divider></mat-divider>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Transaction icon-button with a menu">
          <mat-icon> import_export</mat-icon>
          <span>Transactions</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu1="matMenu" class="my-menu1">
              <button mat-menu-item class="list1">
                  <mat-icon>history</mat-icon>
                <span>Transaction History</span>
              </button>
              <button mat-menu-item class="list1" routerLink="/lendBook" (click)="showPage()"> 
                  <mat-icon>book</mat-icon>
                <span>Lend a Book</span>
              </button>
              <button mat-menu-item class="list1">
                <mat-icon>edit</mat-icon>
                <span>Edit Transaction</span>
              </button>
              <button mat-menu-item class="list1">
                  <mat-icon>delete</mat-icon>
                <span>Delete Transaction</span>
              </button>
            </mat-menu>
      </button>
      <mat-divider></mat-divider>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
          <mat-icon>perm_identity</mat-icon>
          <span>Members</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu2="matMenu" class="my-menu2">
              <button mat-menu-item class="list2">
                  <mat-icon>list</mat-icon>
                <span>Members List</span>
              </button>
              <button mat-menu-item class="list2" routerLink="/addMember" (click)="showPage()"> 
                  <mat-icon>group_add</mat-icon>
                <span>Add a Member</span>
              </button>
              <button mat-menu-item class="list2">
                <mat-icon>edit</mat-icon>
                <span>Edit Member</span>
              </button>
            </mat-menu>
      </button>
      <mat-divider></mat-divider>
      <button mat-button class="menu-button" mat-icon-button [matMenuTriggerFor]="menu3" aria-label="Example icon-button with a menu">
          <mat-icon>error</mat-icon>
          <span>Fines</span>
          <mat-icon>arrow_drop_down</mat-icon>
          <mat-menu #menu3="matMenu" class="my-menu3">
              <button mat-menu-item class="list3">
                  <mat-icon>list</mat-icon>
                <span>Fine List</span>
              </button>
              <button mat-menu-item class="list3" routerLink="/addFine" (click)="showPage()"> 
                  <mat-icon>add_circle</mat-icon>
                <span>Add Fine</span>
              </button>
              <button mat-menu-item class="list3">
                <mat-icon>edit</mat-icon>
                <span>Edit Fine</span>
              </button>
            </mat-menu>
      </button>

      <mat-divider></mat-divider>

      <button mat-button class="menu-button">
          <mat-icon>phone</mat-icon>
          <span>Contact us</span>
      </button>


  </mat-sidenav>
  <mat-sidenav-content *ngIf="show">
      <div class="quote">
          <p>
              " The library is inhabited by spirits that come out of the pages at night "
          </p>
          <p>
              -K
          </p>
      </div>

  </mat-sidenav-content>
</mat-sidenav-container>

admin.component.ts:

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

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

 constructor() { }

  show: boolean = true;

  ngOnInit(): void {
  }

  showPage() {
    this.show = false;
  }

}

Answer 1

The best approach would be to leverage Angular Routing and use the <router-outlet></router-outlet> directive to render any respective components when routing occurs. This is how single-page applications are intended to work.

have a read through this angular guide to understand the concept in more detail.

https://angular.io/guide/router-tutorial#using-angular-routes-in-a-single-page-application

Once you have read that and understand router, break your "pages" into separate components. AddFineComponent, LendBookComponent, etc. and route to them into the child router-outlet

  <mat-sidenav-content>
      <router-outlet name="sub"></router-outlet>
  </mat-sidenav-content>

.routing.ts

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'admin',
    component: AdminComponent,
      children: [
        {path: 'lendBook',component: LendBookComponent, outlet:"sub" },
        {path: 'addFine',component: AddFineComponent, outlet:"sub"}
      ]
   }
];

and update your routerLinks

routerLink="admin/addFine"