Sliding Segments Ionic v2

slidespage.html

<ion-toolbar>
  <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
    <ion-segment-button value="first">
      First
    </ion-segment-button>
    <ion-segment-button value="second">
      Second
    </ion-segment-button>
    <ion-segment-button value="third">
      Third
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-content padding>

  <ion-slides #mySlider (ionDidChange)="onSlideChanged($event)">
    <ion-slide *ngFor="let slide of slides">
      <h1>{{ slide.title }}</h1>
    </ion-slide>
  </ion-slides>

</ion-content>

<style>
  ion-scroll {
    width: 100%;
    height: 100%;
  }
</style>

slidespage.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-slidespage',
  templateUrl: 'slidespage.html'
})
export class SlidesPage {
  @ViewChild('mySlider') slider: Slides;
  selectedSegment: string;
  slides: any;

  constructor(public navCtrl: NavController) {
    this.selectedSegment = 'first';
    this.slides = [
      {
        id: "first",
        title: "First Slide"
      },
      {
        id: "second",
        title: "Second Slide"
      },
      {
        id: "third",
        title: "Third Slide"
      }
    ];
  }

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

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

}

How to make the first segment activated by default when the segment buttons is dynamic? ngModel is only working if the data is static which already hardcoded.

Unfortunately this is broken in ionic 5 and IonSlides.