Routing support in tabset component

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

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=65252" target="_blank" rel="nofollow">@aathithan</a></p>

<p>I suggest you use tabs from navigation <code>navs</code>: <a href="https://mdbootstrap.com/docs/angular/navigation/navs/#tabs-justified" target="_blank">https://mdbootstrap.com/docs/angular/navigation/navs/#tabs-justified</a></p>

<p>Below is my example:</p>

<p><strong>app.component.html</strong></p>

<p><strong>ap.component.ts</strong></p>

<pre class="prettyprint"><code>constructor(private router: Router) {}

onSelect(e: any) {
    this.router.navigate([e]);
  }
</code></pre>

<p><strong>styles.scss</strong></p>

<pre class="prettyprint"><code>.tab-content {
  display: none;
}
</code></pre>

<p>Hope it helps!</p>

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

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

aathithan

37Support score
3Questions 2Answers 0Snippets