Change Ion-Title text programatically

Issue

I've recently picked up Ionic Framework to do an app. All is going well but I'm having issues with a rather small part but annoying.

I've implemented swiperJS which works ok, I'm now wanting to show the current index of which slide you are on in the ion-title object. I have got the index spitting out to the console fine and putting it into a variable but what I thought would have worked didn't. It just doesn't update the title, it only accepts the initial number I gave it.

register.page.ts

import { Component, OnInit } from '@angular/core';
import { SwiperOptions } from 'swiper';

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

  private slides: any;
  slideIndex: number;

  swiperConfig: SwiperOptions = {
    slidesPerView: 1,
    spaceBetween: 50,
    navigation: false
  };

  constructor() {
    this.slideIndex = 1;
  }

  ngOnInit() {

  }

  setSwiperInstance(swiper: any) {
    this.slides = swiper;
  }

  onSlideChange(){
    
    this.slideIndex = this.slides.activeIndex + 1;
    console.log(this.slideIndex);
  }
}

register.page.html

<ion-header color="primary">
  <ion-toolbar>
    <ion-title class="ion-text-center">Step {{slideIndex}}</ion-title>
    <div class="wizardProgress ion-text-center"></div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <swiper color="primary" (swiper)="setSwiperInstance($event)" (slideChange)="onSlideChange()" [config]="swiperConfig">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
    <ng-template swiperSlide>Slide 4</ng-template>
    <ng-template swiperSlide>Slide 5</ng-template>
    <ng-template swiperSlide>Slide 6</ng-template>
    <ng-template swiperSlide>Slide 7</ng-template>
  </swiper>
</ion-content>

I've tried replacing the whole title as per another question posted, I've tried setting it all as a string too. As I mentioned, it should alter the title to say 'Step 1', 'Step 2' etc but it just stays at 'Step 1' even though the slide changes and the variable (slideIndex) changes too which I can see from the console output.

Any ideas why it won't change? I can see the variable in the background change but it just won't render it.

Solution

You can use the activeIndexChange event and recovery the activeIndex with the swiper object.

Your HTML:

 <swiper color="primary" (activeIndexChange)="activeIndexChange($event)" (swiper)="setSwiperInstance($event)" [config]="swiperConfig">
    <ng-template swiperSlide>Slide 1</ng-template>
    ...
  </swiper>

Your .ts:

 activeIndexChange(swiper) {
     this.slideIndex = swiper.activeIndex
 }

If still don't updating, try using change detector:

import { ChangeDetectorRef } from '@angular/core';

constructor (private changeDetector: ChangeDetectorRef) {}

and after the this.slideIndex = swiper.activeIndex you call:

activeIndexChange(swiper) {
     this.slideIndex = swiper.activeIndex;
     this.changeDetector.detectChanges();
 }

Answered By - SidiBecker