Topic: Routing support in tabset component

aathithan priority asked 5 years ago


*Expected behavior*Support for router-outlet in tabset component https://mdbootstrap.com/docs/angular/components/tabs/#classic-tabs*Actual behavior*no support*Resources (screenshots, code snippets etc.)*n/a


Bartosz Termena staff commented 5 years ago

Dear @aathithan

Could you provide more information about a specific problem? Best Regards, Bartosz.


aathithan priority commented 5 years ago

Hi @Bartosz Termena,

We are looking for routerLink support for the tab buttons. and the tab content would be router-outlet


Bartosz Termena staff answered 5 years ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.3.0
  • Device: Desktop
  • Browser: chrome
  • OS: mac
  • Provided sample code: No
  • Provided link: Yes