BACKGROUND:
After working perfectly for some time, all the click events in my Ionic app suddenly stopped functioning. I have two floating action buttons that used to trigger a JS alert popup and open a modal window, but now they are unresponsive.
The only elements with functional click events now are my ion-tab-buttons.
WHAT I HAVE TRIED/TESTED:
I attempted to unwrap these elements from ion-items and ion-lists, yet the issue persisted.
I also tried using a simple ion-button as a replacement, but that didn't solve the problem either.
Moving the ion-button outside of the card element just below the opening ion-content tag did not make any difference.
Similarly, relocating the ion-button outside of the ion-content; just above the tabs, had no effect on the click events.
Any assistance would be greatly appreciated.
contact.page.html
<ion-header class="navbar">
<div class="icons">
<ion-buttons slot="start">
<ion-menu-button color="tertiary"></ion-menu-button>
</ion-buttons>
<img src="assets/logo.png" />
</div>
</ion-header>
<ion-content text-center>
<ion-card>
<ion-card-header>
<ion-card-title>Contact Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<br>
<ion-card-content>
<ion-label><b>Head Office: Wembley</b>
<br>
Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
DX: 51165 Wembley Park
We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
</ion-label>
<br>
<br>
<ion-list text-left>
<ion-item>
<ion-label>Call us on 0800 3881 0211</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
<ion-icon name="call"></ion-icon>
</ion-fab-button>
</ion-item>
<ion-item>
<ion-label>Email at <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="08696c656166486a677d7c61797d6d7b6764616b617c677a7b266b67267d63">[email protected]</a></ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
<ion-icon name="mail"></ion-icon>
</ion-fab-button>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="about()">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()">
<ion-icon color="blue" name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button class="activeTab">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>contact.page.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { CallNumber } from '@ionic-native/call-number/ngx';
import { ModalController, AlertController } from '@ionic/angular';
import { EmailPage } from '../email/email.page';
@Component({
selector: 'app-contact',
templateUrl: './contact.page.html',
styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {
constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }
ngOnInit() {
}
about() {
console.log('clicked about')
this.router.navigate(['members/menu/about'])
}
dashboard() {
console.log('clicked dashboard')
this.router.navigate(['members/menu/dashboard'])
}
async callAlert() {
console.log('method executed')
const callAlert = await this.alertController.create({
message: "Are you sure you want to call Boutique Solicitors?",
buttons: [{
text: "Cancel",
role: "cancel"
},
{
text: "Call",
handler: () => {this.callBS()}
}
]
});
callAlert.present()
}
async callBS() {
this.callNumber.callNumber("07847948252", false)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err))
}
async modalEmail() {
const modal = await this.modalController.create ({
component: EmailPage
});
modal.present();
}
}