Ion-segement as reusable component

Hi,
our app are used some tab navigations, once a super-tabs component and once a ion-segment. We only want one component and want to use this as reusable component for every tab navigations in our app.

In our list-comonent we are using the super-tabs with slides and get the content from external components:

<ion-toolbar>
      <app-super-tabs></app-super-tabs>
</ion-toolbar>

<ion-slides>
        <ion-slide class="slide-1">
             <app-dashboard></app-dashboard>
        </ion-slide>
        <ion-slide class="slide-2">
             <app-charts></app-charts>
        </ion-slide>
        <ion-slide class="slide-3">
             <app-favorites></app-favorites>
        </ion-slide>
</ion-slides

And in our form component we are using a tab structure from backend, so we iterate through the tab object:

<ion-toolbar>
        <ion-segment scrollable>
            <ion-segment-button (click)="clickTab(tab.name)"
                *ngFor="let tab of list$, first as isFirst"
                [checked]="isFirst">
                {{ tab.name }}
            </ion-segment-button>
        </ion-segment>
</ion-toolbar>

Any idea how we can use the property binding to create a reusable ion-segment component?

Thanks for every tip!

1 post - 1 participant

Read full topic