CODEWITHSUNDEEP
node.jsangularbootstrapping
Subburaj
Subburaj

Reputation: 5192

Dynamic Tab + bootstrap + angular5

I am new to Front-End and angular part. I need to load tabs dynamically from what it returned from Backend...

Consider i am getting an array as like below :

*["tab1","tab2","tab3"].*

I have show tabs in a page with tab1, tab2, tab3.

What i have tried is hardcoded , its working,

 <div class="nav-tabs-custom">
          <ul class="nav nav-tabs" >
            <li class="active"><a href="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
            <li><a href="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
            <li><a href="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
             <li><a href="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
          </ul>
    </div>
<div class="tab-content">            
        <div class="tab-pane active" id="tab_1"> </div>
        <div class="tab-pane active" id="tab_2"> </div>
        <div class="tab-pane active" id="tab_3"> </div>
        <div class="tab-pane active" id="tab_4"> </div>
</div>

Also i have to make sure that on click of the tab it should call a method with clicked name. All should be dynamic. Please suggest your ideas.Thanks.

Upvotes: 3

Views: 3528

Answers (3)

Manit
Manit

Reputation: 1105

So, there are different ways of implementing it. One way as suggested by @Comann will definitely work. The other way of doing the same thing would be installing bootstrap dependency - try doing 

npm install --save bootstrap

Import this in your styles.css file 

@import '~bootstrap/dist/css/bootstrap.css';

You can also import it in your angular.json file assuming you might have generated the project using angular-cli. I prefer it to be in styles.css.

Create a separate navbar component and in the template

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" routerLink="/route1">Route1<span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/route2">Route 2</a>
    </li>
  </ul>
 </div>
 </nav>
 <router-outlet></router-outlet>

Instead of having the two router links hard coded you will loop around with *ngFor on the array of tabs and populate it. Hope this helps.

Upvotes: -1

Subhan
Subhan

Reputation: 1634

I achieved such functionality using ngx-Bootstrap

Array of tabs:

tabs: any[] = [{
    title: 'Dynamic Title 1',
    content: 'Dynamic content 1'
  },
  {
    title: 'Dynamic Title 2',
    content: 'Dynamic content 2'
  },
  {
    title: 'Dynamic Title 3',
    content: 'Dynamic content 3',
    removable: true
  }
];

Display tabs:

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [customClass]="tabz.customClass">
      {{tabz?.content}}
    </tab>
  </tabset>

Check full usage here.

Upvotes: 0

Mik
Mik

Reputation: 21

you have to change href="#id" to data-target="#id"

    <div class="nav-tabs-custom">
          <ul class="nav nav-tabs" >
            <li class="active"><a data-target="#tab_1" data-toggle="tab" (click)="loadData('abc')"><b>tab1</b></a></li>
            <li><a data-target="#tab_2" data-toggle="tab" (click)="loadData('xxx')"><b>tab2</b></a></li>
            <li><a data-target="#tab_3" data-toggle="tab" (click)="loadData('xyz')"><b>tab3</b></a></li>
             <li><a data-target="#tab_4" data-toggle="tab" (click)="loadData('fgfgfg')"><b>tab4</b></a></li>
          </ul>
    </div>
<div class="tab-content">            
        <div class="tab-pane active" id="tab_1"> </div>
        <div class="tab-pane active" id="tab_2"> </div>
        <div class="tab-pane active" id="tab_3"> </div>
        <div class="tab-pane active" id="tab_4"> </div>
</div>

Upvotes: 2

Related Questions