Currently, I am working with Ionic 5 and Firebase. Everything is running smoothly until I implemented the onAuthStateChanged function to persist login for authenticated users. Here is the code snippet:
this.ngFireAuth.onAuthStateChanged((user) => {
if (user){
this.navCtrl.navigateForward('/home');
}
})
This piece of code is added in my constructor and it works properly. However, upon navigating to the HOME page, the variables used in the HTML file do not update, resulting in visual errors as the variables are not updating within *ngIf.
I can confirm that these variables are functioning correctly in my TS file, indicating that the issue lies specifically within the HTML file.
An example of such variables being utilized in the HTML file:
<ion-button fill="clear" [ngClass]="{'isActive': slide_index === 0}" (click)="goto_slide(0)">
<ion-icon slot="icon-only" name="mail-outline"></ion-icon>
</ion-button>
// Other similar ion-buttons with different parameters...
Despite the functionality of the above code in my TS file where slides change successfully, the HTML file does not reflect these changes as the slide_index remains at 0, causing visual discrepancies. Any suggestions or advice would be greatly appreciated.
Please note: If the home page link is refreshed, everything works fine. Additionally, when logging in with valid credentials and being redirected to the home page, the HTML components work as expected. The issue only arises when accessing routes through the onAuthStateChanged function.