title: Integrating api to navigation tabs in angular
body: <pre><code>        &lt;div class=&quot;card card-primary card-outline card-outline-tabs&quot;&gt;
        &lt;div class=&quot;card-header p-0 border-bottom-0&quot;&gt;
          &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;custom-tabs-three-tab&quot; role=&quot;tablist&quot;&gt;
            &lt;li class=&quot;nav-item&quot; *ngFor=&quot;let farmingdata of farminginnerdata;let i=index&quot; &gt;
              &lt;a
                class=&quot;nav-link&quot; [class.active]=&quot;i==0&quot;
                id=&quot;{{ farmingdata.id }}&quot;
                href=&quot;{{ farmingdata.id }}&quot;
                data-toggle=&quot;pill&quot;
                (click)=&quot;onContent(farmingdata.id)&quot;
                role=&quot;tab&quot;
                aria-controls=&quot;custom-tabs-three-home&quot;
                aria-selected=&quot;true&quot;
                &gt;{{ farmingdata.name }}&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body&quot; *ngIf=&quot;farminginnerdata&quot;&gt;
          &lt;div class=&quot;tab-content&quot; id=&quot;custom-tabs-three-tabContent&quot;
           *ngFor=&quot;let farmingdata of farminginnerdata ;let i=index&quot;&gt;
            &lt;div
              class=&quot;tab-pane fade show&quot; [class.active]=&quot;i==0&quot;
              [id]=&quot;farmingdata.id&quot;
  
              role=&quot;tabpanel&quot;
              aria-labelledby=&quot;custom-tabs-three-Manual-tab&quot;&gt;
            &lt;div *ngIf=&quot;farmingdata.content; else blankdata&quot; [innerHTML]=&quot;farmingdata.content&quot;&gt;&lt;/div&gt;
            &lt;ng-template #blankdata&gt;No data available &lt;/ng-template&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
  
        &lt;!-- /.card --&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I am a learner in angular ver.10.
  I want to integrate API to that nab-tabs.
  The issue is when the data first initial loaded, the first tab gets activated and shows its data in tab-content but when I change to another tab, it doesn't show the data.
  At what part I have to change or modify, need some help to solve it.</p>
  <p>Issue: dynamic data using bootstrap 4 navigation tabs.<br />
  Environment: Angular framework ver.10<br />
  Attempt: Integrated API to card-header nav tabs, got id when clicked on a particular tab but the card body data not changing.</p>