[SOLVED] Tabs inside a page


I feel like I going crazy because what I want to realize is simple but no way to find the way.
I have a page let’s call it “Page” and inside this page I want to display 3 tabs contents but on what left from the page.
And I want the tab in relative position not fixed !


**If it’s not obvious, I want to be able to click on “tab2” and have “Content2” instead of “Content1”


  • Ionic4
  • Angular 8
  • Without or without router I don’t care (for now I tried with routing)

I think is quit easy but maybe it’s not the “tab” component I should use.
Let me known if you need more information



Yeah, I suspect segment might be a better fit here.

Ok indeed I can replace the button with “Segment” but there is no linked content.

As solution, what do you think of:

  • Segement for the button with action on it like : click() {variable = true}
  • Content = simple < div > with ngIf=variable (<-- By the way is ngIf available with Ionic-Angular?)

I would do this on Angular, but I don’t known why I tried to use only directive.
Hope I’m understandable :grin:

That sounds more or less like the first thing I would attempt, and by the way yes ngIf and ngFor and all the other Angular structural directives work just fine with Ionic.

Yes it’s working !
Thanks you very much, I keep thinking it’s weird that my case wasn’t include in the Tabs component. I believe it’s a classic with tabs.

But any way, it’s working I will upload a part of my code when ready for anyone with the same issue
And a special thanks to you @rapropos, it’s the second time you reply in less than 2 minutes …
Awesome :+1: !

Edit - Code:


export class TestPage implements OnInit {
  i_tab = 't1';

  constructor() { }

  ngOnInit() {

  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
    this.i_tab = ev.detail.value;



      <ion-segment (ionChange)="segmentChanged($event)">
        <ion-segment-button value="t1">
        <ion-segment-button value="t2">
        <ion-segment-button value="t3">

    <div *ngIf="i_tab === 't1'">      T1    </div>
    <div *ngIf="i_tab === 't2'">      T2    </div>
    <div *ngIf="i_tab === 't3'">      T3    </div>