Create segment dynamically

Ionic Framework ionic-v3
1

Hello everyone,
I am looking to make a dynamic segment and to click a displayed content for each segment.
Default show home segment

in .html file

<ion-header>
  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <strong>Ionic 3</strong> Start
    </ion-title>
    <ion-buttons end>
      <button ion-button tappable (click)="presentNotifications($event)">
        <ion-icon name="notifications"></ion-icon>
      </button>
      <button ion-button tappable (click)="goToAccount()">
        <ion-icon name="cog"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
    <ion-segment-button value="{{i.libelle}}" *ngFor="let i of selected.slice().reverse()">
      {{i.libelle}}
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>
  <!--How do I show content when click on segment item-->
</ion-content>

in home.ts

import {Component,ViewChild } from "@angular/core";
import {IonicPage, Slides, NavController, PopoverController} from "ionic-angular";
import {Storage} from '@ionic/storage';
import {NotificationsPage} from "../notifications/notifications";
import {SettingsPage} from "../settings/settings";
import {TripsPage} from "../trips/trips";
import {SearchLocationPage} from "../search-location/search-location";

import { ApiServicesProvider } from '../../providers/api-services/api-services';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

@ViewChild('mySlider') slider: Slides;
  selectedSegment: string;
  selected: any;

  home = {idType:0,libelle:"Accueil"}
  
  constructor(public navCtrl: NavController) {
    this.selectedSegment = this.home.libelle;
    this.selected = [
    {
      idType:1,
      libelle:"Vetement",
      code:"clothes"
    },
    {
      idType:2,
      libelle:"Chaussures",
      code:"shoes"
    },
    {
      idType:3,
      libelle:"sac& accessoire",
      code:"accesorie"
    }
  ];
    this.selected.push(this.home);
    console.log(this.selected)
  }

  onSegmentChanged(segmentButton) {
    console.log("Segment changed to", segmentButton.value);
    const selectedIndex = this.selected.findIndex((slide) => {
      return slide.id === segmentButton.value;
    });
    this.slider.slideTo(selectedIndex);
  }

  onSlideChanged(slider) {
    console.log('Slide changed');
    const currentSlide = this.selected[slider.getActiveIndex()];
    this.selectedSegment = currentSlide.id;
}


}

//
2

Hello,

if I understood it right, then you have, depending to your needs, a few possibilities.

You can use attach [hidden]= mytruhness to html element and show or hide it.

You can use ngIf directive to put whatever you want to the dom.
Same with ngSwitch directive.
Maybe you have always the same html structure and want only change [properties] of them, then you can bind it to your values…
You want show text with {{whatever}} string interpolation.

By the way. I prefer let i of items, mean all manipulation to array is made in ts and if manipulation is ended put it result to items. These makes html easier with less errror.

Best regards, anna.liebt

1 Like