logged == fal" /> logged == fal" /> logged == fal"/>

Angular 17 - should I switch from non-async pipe to async in *ngIf? Variable in ngIf is not updated anymore

189 Views Asked by At

After upgrading Angular, I noticed that my component is displayed even if it should't.

<component-name *ngIf="!logged"></component-name>

logged == false, and it doesn't render as it should when I run ng serve. With SSR this component is rendered.

It works when I change this line to

<component-name *ngIf="(loggedInUpdated$ | async) == false"></component-name>

but... should I really update my whole app? It worked before and "logged" was updated properly in the html file.

.ts

logged = false;

ngOnInit {
   this.auth.loggedInUpdated$
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(logged => this.onLoggedInUpdated(logged));
}

onLoggedInUpdated(logged: boolean) {
        this.logged = logged;
        this.cdRef.detectChanges();
    }

EDIT I got it to work by adding :

this.onLoggedInUpdated(this.auth.getLoggedIn()); // it's getting the current state

in the ngOnInit().

But at that time, logged == false. Only after this.auth.loggedInUpdated$ the value changes to true so it changes from false to true anyway. Maybe someone can help me understand this?

0

There are 0 best solutions below