[SOLVED] Tabs inside a page

Ionic Framework Ionic Angular
1

Hi,

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 !

Example:

ex_tabs_ionic
ex_tabs_ionic359×673 18.7 KB

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

Info:

  • 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

Thanks

Xav

2

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

3

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:

4

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.

5

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:

test.page.ts

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

  constructor() { }

  ngOnInit() {
  }

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

}

test.page.html

<ion-row>
      <ion-segment (ionChange)="segmentChanged($event)">
        <ion-segment-button value="t1">
          <ion-label>Friends</ion-label>
        </ion-segment-button>
        <ion-segment-button value="t2">
          <ion-label>Enemies</ion-label>
        </ion-segment-button>
        <ion-segment-button value="t3">
          <ion-label>Enemies</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-row>

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