Ionic cordova button not clickable in IOS Emulator -- Need Help

Ionic Framework Ionic Angular
1

When I run the below code on a browser; it works like fine and when I click the buttons they trigger the functions, but when I deploy it on ios emulator then the click does not work at all. This is on ionic 5.

HTML:

<ion-content padding>
      <ion-button expand="block" (click)="triggerThis()">Add Developer Info</ion-button>
      <ion-button expand="block" (click)="gotoNextPage()">Goto Next Page</ion-button>
      <h5>{{changevar}}</h5>
</ion-content>

TypeScript:

import { DatabaseService, Dev } from './../../services/database.service';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {AlertController} from '@ionic/angular';
import {NavController} from '@ionic/angular';
import { Router } from '@angular/router';

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

  // tslint:disable-next-line:ban-types
  changevar: String = '<<<<<<<>>>>>>>>';

 
  constructor(private db: DatabaseService, private alertController: AlertController, private route: Router) { }


  gotoNextPage() {
    this.route.navigate(['/page2']);
  }


  triggerThis() {

    this.changevar = 'This is a message set easily ';

    this.openAlertBox();

   
  }

  async openAlertBox() {
    const openAlertVar = await this.alertController.create({
      header: 'Insert your text',
      message: 'enter your text' ,
      buttons: [{
        text: 'Cancel'
      },
        {
          text: 'OK'
        }
      ]
      // tslint:disable-next-line:no-shadowed-variable
    });

    await openAlertVar.present();

  }

}