Change Ion-Title text programatically


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.

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

  selector: 'app-register',
  templateUrl: './',
  styleUrls: ['./'],
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;

    this.slideIndex = this.slides.activeIndex + 1;

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

  <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>

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.


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>

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;

Answered By – SidiBecker

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published