Why do variables in an HTML file fail to update after being navigated within onAuthStateChanged?

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.

angulartypescriptfirebaseionic-frameworkfirebase-authentication

Answer №1

At this point in time, I am still uncertain about the cause of this issue. To whoever may be able to provide an explanation, thank you. Despite this, I managed to discover a solution that allows all variables in the HTML file to function properly.

async ngOnInit() {

const isLogin = await new Promise<any>((resolve, reject) => {
this.ngFireAuth.onAuthStateChanged((user) => {
  if (user){
    resolve(true);
  }
})
})

if(await isLogin) {
  this.router.navigate(["/home"]);
}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve information from multiple pages of my REST API?

Recently, I integrated a search engine into my application and now I need to gather all the data available for a particular resource, such as all the posts made by a user. The response I receive from my API looks something like this: { "count": 2, ...

angulartypescriptdjango-rest-framework

Sorting TypeScript types by required properties first

Can anyone recommend a plugin or ESLint rule that can automatically sort types by assuming required fields come first, followed by optional fields? Here's an example before: type TExampleSorting = { title?: string; value?: number; text: string; ...

typescriptvisual-studio-codenext.jsjsxeslint

Zod combinator that accepts a dynamic field name

When converting XML to JSON, my library outputs {MyKey: T} for single-element lists and {MyKey: T[]} for multi-element lists. The equivalent TypeScript type is type XmlJsonArray<T, element extends string> = Record<element, T | T[]>. To implemen ...

typescriptzod

Obtaining POST request parameters in an Express server

Below is the code snippet for adding a product using an angular service. The product is passed as the body. addProduct(product): Observable<any> { return this.http.post<Observable<any>>( `http://localhost:4401/api/products`, ...

javascriptnode.jsangular

Using Angular to assign a CSS variable to the before/after pseudo-classes

Having trouble passing a variable with [ngStyle] and reading it on the ::before class, any guidance in the right direction would be much appreciated! CSS: .handle-slider__control { height: 7px; z-index:1; background: $colour-alto; positi ...

htmlcssangular

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

Having created a custom button component, I encountered an issue when trying to handle the onClick event from outside the component. I specified the parameter type for the onClickCallback as MouseEvent<HTMLButtonElement, MouseEvent>, which is typical ...

reactjstypescriptnext.js

Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

I am facing an issue in Angular 4 where I am attempting to retrieve details from a specific user when clicking on the 'user link profile'. However, I am unable to subscribe to my function because the return value of switchMap is AnonymousSubject ...

javascriptangulartypescriptobservable

Encountering difficulties retrieving and displaying the data stored in my Firebase node

When examining the Firebase structure, it appears as follows: characters -Lt9nfslaIKgoe7E3SHT -LtA93jCQn-2Kmf4gP-S -LtK-Bk156abpROmhxgI ... in these keys booleans are saved from 1 - 64, true or false 1: true, ...

pythonfirebasefirebase-realtime-databasefirebase-admin

Creating a customizable filter by using the function of an object

I am currently developing a customizable dynamic filter system, similar to the functionalities offered by Yahoo Screener. To achieve this, I have defined an interface for the available filter fields: export interface FilterField { label: string; se ...

angulartypescript

Tips for adding a time increment of 24 hours to a date variable in Angular 6

My goal is to update a date variable called EndDate stored in localStorage by adding exactly 24 hours to it. The current value in the localStorage is Sun Jun 09 2019 20:39:44 GMT+0530 (India Standard Time). var endDate = new Date(); endDate.setDat ...

angulartypescriptangular6

Activate the taskpane window in OfficeJS by simply clicking on the ribbon button

Hello everyone, I am currently working on creating a Word add-in using the Angular framework in OfficeJS. I have managed to add a ribbon tab with a ribbon button, and I would like to toggle the taskpane when the button is clicked. Is there a way to achieve ...

angularoffice-jscpu-word

Adding properties to React Component

Due to security reasons, I am required to update the ant design library in my codebase from version 3 to 4. In the past, this was how I used the icon: import { Icon } from 'antd'; const Demo = () => ( <div> <Icon type="smile" ...

reactjstypescriptantd

Determining a value that increases to yield a fresh sum

I'm currently developing a character generator that determines your score based on the experience points you allocate to it. The scoring system is such that 1 XP gives you a score of 1, 3 XP gives you a score of 2, 6 XP gives you a score of 3, 10 XP g ...

angulartypescript

Experiencing difficulty with Angular's connectivity to API via HTTP due to the absence of the CORS header 'Access-Control-Allow-Origin'

My current challenge involves retrieving data from an API using http in Angular. When I trigger the function through ngOnInit, the data is successfully fetched: handleError(error: HttpErrorResponse) { return throwError(() => new Error('Somethin ...

angularhttpcors

Only 1 argument was provided instead of the expected 2 when attempting to update Firebase through Ionic

I encountered an issue while trying to update Firebase from Ionic. Below is the function I used to update the data. Below is the TypeScript code: updateLaporan() { this.id = this.fire.auth.currentUser.uid; this.db.list('/laporan/'+thi ...

angulartypescriptfirebase

Permission Error: Client has been denied access to the requested data in the Firebase Database

I have a database named users set up on Firebase. I've configured the following rule to allow read and write access: rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { allow read, write: if true; ...

node.jsfirebasefirebase-realtime-databasenext.jsfirebase-security

Using `querySelector` in TypeScript with Vue 3

Encountered a TypeScript error while using the Vue Composition API let myElement = document.querySelectorAll('my-element') The TS error I'm getting when trying to access it like this: Property '_props' does not exist on type ...

typescriptvue.jsvuejs3

Does the Rxjs timer cease functioning when the user switches to a different window?

I have encountered an issue while setting a 60-second countdown with rxjs timer on Angular 11. The countdown works properly as long as the window is kept open. However, if I switch to another tab in the same browser, the timer stops after a few seconds. Th ...

angularrxjs

What is the procedure for linking my SQL database with Angular?

This is a sample HTML code snippet to create a sign-in form: <div class="col-md-8"> <form (submit)="onSubmit()" method="POST"> <input type="text" class="form-control mb-2" name="names" [(ngModel)]="profileForm.name" placeholder="Usern ...

angular

Is it possible to eliminate additional properties from an object using "as" in Typescript?

I am looking for a way to send an object through JSON that implements an interface, but also contains additional properties that I do not want to include. How can I filter out everything except the interface properties so that only a pure object is sent? ...

javascripttypescript