How do display dynamic tab content in Angular using ng-bootstrap

Question

What am i trying to do?

I send a POST request to an API and using the response I dynamically create tabs. Here's the code for the following:

<div id="wrapper" class="container-fluid">
<ngb-tabset class="nav-fill">
<ngb-tab *ngFor="let category of categories" [title]="category.name" [id]="category.id">
      <ng-template ngbTabContent>
        <!-- Here we will have some content.
    This content comes from the API which takes category.id as a param -->
      </ng-template>
    </ngb-tab>
</ngb-tabset>
</div>

I hope the code is clear.

The problem I'm facing is I'm not able to figure out how to get the content. Because I need the category.id to get the content, and somehow i have to attach a method which takes the category.id and performs the request and gets data.

So the user clicks on one tab, and some content is shown, and when he clicks on other tabs another set of content is shown which is all got through an API.

I found one method to do it. OnNgInit() I can get all the data required and then when the *ngFor runs I'll use the id reference to get the content. But I was looking for a more robust method to do it

@programoholic that's what I'm not able to figure out. It is loaded from a GET request based on which tab is clicked. — Goutam B Seervi
– Goutam B Seervi, Commented Jan 16, 2019 at 13:31
there is select event or focus event is there .. you can call method on such event to get the data, once done assign the value like category.content = result ; and in html {{category?.content}} — programoholic
– programoholic, Commented Jan 16, 2019 at 13:51

Priyanka · Accepted Answer · 2019-01-16 13:58:07Z

2

Instead of calling all content data during ngOninit() method which is sometimes never used, you can attach (ngClick) event handler to your ngb tab like this:

<ngb-tab *ngFor="let category of categories" (ngClick)="selectedTab(category.id)" [title]="category.name" [id]="category.id">
<ng-template ngbTabContent>
    <!-- Here we will have some content.
This content comes from the API which takes category.id as a param -->
  </ng-template>
</ngb-tab>

and in your component, you can call your rest method to fetch the content for the tab:

@Component({...})
export class someComponent{
/* constructors private members bla bla */

  selectedTab(id:int):any{
//call your service which makes http call to get content for your selected tab
    getContent(id);
   }
}

hope that answers your question!

answered Jan 16, 2019 at 13:58

Priyanka

4381 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Goutam B Seervi Over a year ago

for some reason ngClick event is not being fired

Priyanka Over a year ago

sorry. just got hold of its documentation. use (tabChange) method on the ngb-tabset element to call your dynamic tab content rest api. refer ng-bootstrap.github.io/#/components/tabset/examples for more information

Collectives™ on Stack Overflow

How do display dynamic tab content in Angular using ng-bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related