Dynamic Tab + bootstrap + angular5

Question

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.

Answer 1

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>