Angular Navigationbar

 there are different kind of navigation routing in angular.here i like to explain one of the routings

for ex: we have lefnavbar in that only selected navbar only active for that use below one

 ngOnInit(): void {

    this.activePage = this.activatedRoute.snapshot.url[0].path

    //this.id='1233433';

  }

  pageNavigate(tab) {debugger

    

    this.id=localStorage.getItem('checkOutData');

    if (tab === 'dashboard') {

      this.router.navigate(['/renew/'+this.id]);

    } else if (tab === 'profileupdate') {

      this.router.navigate(['/reissue']);

    } else if (tab === 'doctorconfig') {

      this.router.navigate(['/revoke']);

    } else if (tab === 'profileverify') {

      this.router.navigate(['/profileverify']);

    } else if (tab === 'appointmentList') {

      this.router.navigate(['/renew/2331433']);

    } else if (tab === 'patientList') {

      this.router.navigate(['/patientList']);

    } else if (tab === 'changepassword') {

      this.router.navigate(['/changepassword']);

    } else if (tab === 'login') {

      this.router.navigate(['/login']);

    }

    // this.appComponent.checkWebUrl(tab)

  }

}

html:

 <li id="" [ngClass]="{'active': activePage==='dashboard'}" (click) = "pageNavigate('dashboard')">

        <a routerLink="#"class="waves-effect waves-dark">

          <span class="pcoded-mtext">dashbaord</span>

        </a>

    </li>