Dear @aathithan

I suggest you use tabs from navigation navs: https://mdbootstrap.com/docs/angular/navigation/navs/#tabs-justified

Below is my example:

app.component.html

<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-4 pills-secondary purple margin'">
  <!--Panel 1-->
  <mdb-tab heading="path1" (select)="onSelect('routerPath1')"> </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="path2" (select)="onSelect('routerPath2')"> </mdb-tab>
</mdb-tabset>
<div class="container py-5">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

ap.component.ts

constructor(private router: Router) {}

  onSelect(e: any) {
    this.router.navigate([e]);
  }

styles.scss

.tab-content {
  display: none;
}

Hope it helps!

Best Regards, Bartosz.