Dynamic tabs with same page, different titles and content


#1

Hi everyone,

I need my tabs to be rendered dynamically. That page is actually the same, ony the content and title are different. Those tab titles and content come from the server, so it can be 1 or N tabs…

This is what I have today:

<ion-tabs class="tabs">
    <ion-tab *ngFor="let subject of subjects" [root]="subject.component" [tabTitle]="subject.title" [tabIcon]="subject.icon"></ion-tab>
</ion-tabs>

@Page({
        templateUrl: "build/users/sus/home/home-page.html"
})
export class HomePage {
    constructor() {
        this.subjects = new Array<Subject>();
        this.subjects.push(new Subject("Math", MathPage));
        this.subjects.push(new Subject("German", GermanPage));
        this.subjects.push(new Subject("English", EnglishPage));
    }

    public subjects: Array<Subject>;
}

The problem here is that I statically say what are the pages that are going to be shown in my tabs, and this comes actually from the server.

This means I would always have the same page component but with different content and titles.

Is that possible?