Angular 5 Tabs for Ionic

Ionic Framework ionic-v3
1

Hello guys,

I was able to find many working examples of AngularJS 1, 2 tabs:

All of these are working fine but none of their codes are usable on Ionic 3 which uses Angular 5 typescript.
Surprisingly, i wasn’t able to find a single working example of Angular 5 tabs on the internet.
is there any working example of angular 5 tab which can be used on Ionic 3?
Please help. I don’t know how to convert these AngularJS codes into Angular 5 code.

Thanks,

2

I found one example of Angular 5 tab here:

and it uses lots of angular properties I’ve never seen before.
I will try this on Ionic 3 but if you guys know any better example, please leave a comment.
This one apparently can’t be styled individually and looks very limited.

Thanks,

3

Hi,

I use this lib and it works very perfectly.

1 Like
4

Thanks, however this one needs several HTML pages to run.
I’m looking for an example which can use div as a page. Strangely, it’s extremely difficult to find a working Angular 5 tab example which does that. There are lots of anuglarJS 1 tab examples now but nothing for v5.

5

If want it simple, you can create buttons and a method to display or hide some div, for example:

in html

<div class="tab-buttons">
    <button (click)="showTab('home')">
        <ion-icon name="home"></ion-icon> Home
    </button>

    <button (click)="showTab('about')">
        <ion-icon name="about"></ion-icon> About
    </button>
</div>

<div class="tab-content">
    <div class="tab" *ngIf="tabId === 'home'">
        Home Page Content
    </div>

    <div class="tab" *ngIf="tabId === 'about'">
        About Page Content
    </div>    
</div>

In typescript

showTab (tabId) {
   this.tabId = tabId;
}

In scss

.tab-content {
    width: 100%;
    height: 100%;
}

If you want something more simple, you should use vanilla js :wink:

1 Like
6

Thanks a lot! this is what I was looking for… I had no idea regarding how that tabId === ‘page name’ works.
I will try this shorty.

:sunglasses:

1 Like
7

This will use a string to identify the tab you want to show and use it to compare in the ngIf

// A global property of you component class
export class TabsComponent {
    // Start in home
    tabId: string = 'home';

    showTab (tabIdPageName) {
       //tabIdPageName will be the string that you passed from html
       this.tabId = tabIdPageName;
    }
}
1 Like
8

Yes, it’s working really well.

Thanks a lot! you made my day!

1 Like