как изменить активную вкладку на вкладке панели инструментов боковой панели

Question

Итак, я пытался изменить вкладку боковой панели по событию нажатия кнопки на панели инструментов.при этом также измените класс активной вкладки боковой панели.

Кроме того, я новичок в angular, поэтому, пожалуйста, потерпите меня.

Для справки см. изображение и код.

Код:

Кнопка на панели инструментов:

<div class="sub-div ">
            <div class="col-md-12 col-sm-12 ">
                <div class="col-blue mtop10 f1rem fsemibold mleft5">Schedule an exam</div>
                <div class="text-muted mtop10 f1rem fregular  mleft5">Schedule your next exam and let all the teachers and parents know </div>
                <div class="clearfix visible-lg">&nbsp;</div>
                <button  class="ugbtn float-right mtop10  mbottom10"> Set date</button>
            </div>

Боковая панель html:

<div id="sidebar" class="sidenav fsemibold f15 col-white">
<a  align="left">DAV Public School  <i class="fa fa-cog i pull-right"></i></a>
<a  [className] = "activeClassArray[0]" (click)="changeClass(0)" align="left" >Dashboard</a>
<a  [className] = "activeClassArray[1]" (click)="changeClass(1)" align="left">Exams</a>
<a  [className] = "activeClassArray[2]" (click)="changeClass(2)" align="left">Timetable</a>
<a  [className] = "activeClassArray[3]" (click)="changeClass(3)" align="left">Staff attendence</a>
<a  [className] = "activeClassArray[4]" (click)="changeClass(4)" align="left">Fees </a>
<a  [className] = "activeClassArray[5]" (click)="changeClass(5)" align="left">Salary</a>
</div>

Файл боковой панели ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LogoutService } from '../../services/logout/logout.service';
@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  public activeClassArray = ['', '', '', '', '', '' ];
  constructor( private router: Router, private logoutService: LogoutService ) { }

  ngOnInit() {
  }

  public changeClass(id: number): void {
    for (let index = 0; index < this.activeClassArray.length; index++) {
      this.activeClassArray[index] = '';
    }
    this.activeClassArray[id] = 'active';
    switch (id) {
      case 0:
        this.router.navigateByUrl('dashboard');
        break;
      case 1:
        this.router.navigateByUrl('exam');
        break;
      case 2:
        this.router.navigateByUrl('timetable');
        break;
      case 3:
        this.router.navigateByUrl('staffattendance');
        break;
      case 4:
        this.router.navigateByUrl('fees');
        break;
      case 5:
        this.router.navigateByUrl('salary');
        break;
    }
  }

  doLogout(){
    this.logoutService.attemptLogout().subscribe(response=>{
      console.log(response);
      if(response!=null){
        if(response.error!=null){
          alert(response.error);
        }
        else{
          if(response.data.success){
            this.logoutService.moveToSignInPage();
          }
        }
      }
      else{
        alert("Oops something went wrong with server");
      }
    });
  }

}

TDLR: Как я могу нажать кнопку на панели инструментов и изменить активный класс на экзамен и маршрут к экзамену?

Спасибо.