One interesting feature in Ionic 2 is the ability to dynamically create tabs using JSON responses. By linking these tabs with their corresponding pages dynamically, we can enhance user experience. Here's a code snippet that demonstrates this:
<ion-tab *ngFor="let rew of people" [tabTitle]="rew.name"></ion-tab>Let's take a look at how this is achieved in the 'tabs.ts' file:
export class TabsPage {
public people: any;
public result: String;
public pep: any;
public tabs : any;
tab1Root = HomePage;
constructor(public navCtrl: NavController, public peopleSearch: PeopleSearch) {
this.loadPeople();
}
loadPeople() {
this.peopleSearch.load()
.then(data1 => {
this.people = data1.children[0].children
var result =JSON.stringify(this.people);
console.log("Tabs : ",result);
}
);
}
}
The JSON response obtained for creating tabs dynamically looks like this:
Tabs : [{"category_id":5,"parent_id":2,"name":"Masala Mix","is_active":1,"position":1,"level":2,"children":[]},{"category_id":3,"parent_id":2,"name":"Pure spices","is_active":1,"position":2,"level":2,"children":[]},{"category_id":6,"parent_id":2,"name":"Pickles","is_active":1,"position":3,"level":2,"children":[]},{"category_id":8,"parent_id":2,"name":"Rice Mix","is_active":1,"position":4,"level":2,"children":[]},{"category_id":4,"parent_id":2,"name":"Asafoetida","is_active":1,"position":5,"level":2,"children":[]},{"category_id":9,"parent_id":2,"name":"Pappad","is_active":1,"position":6,"level":2,"children":[]},{"category_id":11,"parent_id":2,"name":"Become A Stockist ","is_active":1,"position":7,"level":2,"children":[]}]