Ionic 4 Sliding segments

sliding-segments.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Demo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-toolbar>
    <ion-segment (ionChange)="segmentChanged()" [(ngModel)]="segment" color="warning">
      <ion-segment-button value="0">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="1">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

  <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="true">
    <ion-slide>
      First
    </ion-slide>
    <ion-slide>
      second
    </ion-slide>
    <ion-slide>
      third
    </ion-slide>
  </ion-slides>

</ion-content>

sliding-segments.page.scss

ion-slide {
  height: calc(100vh - 140px);
}

sliding-segments.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.page.html',
  styleUrls: ['./demo.page.scss'],
})
export class DemoPage implements OnInit {

  @ViewChild('slides', { static: true }) slider: IonSlides;

  segment = 0;

  constructor(
  ) { }

  ngOnInit() {
  }

  async segmentChanged() {
    await this.slider.slideTo(this.segment);
  }

  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
  }


}

when i select any segment by default ion slide wont change it always shows the first page