I am encountering issues with finding the right expression for ngIf to evaluate properly.
After following a basic Angularfire2 example, I have successfully managed to log in and out.
import { Component } from '@angular/core';
import { AngularFire } from 'angularfire2';
@Component({
selector: 'app-root',
template: `
<div> {{ (af.auth | async)?.uid }} </div>
<button (click)="login()">Login</button>
<button (click)="logout()">Logout</button>
`,
})
export class AppComponent {
constructor(public af: AngularFire) {
this.af.auth.subscribe(auth => console.log(auth));
}
login() {
this.af.auth.login();
}
logout() {
this.af.auth.logout();
}
}
I am trying to adjust the code to display/hide the appropriate buttons based on the logged-in status. Although I can see that auth is toggling between null and object in the console, the DOM does not update accordingly.
This is my latest attempt:
<div> {{ (af.auth | async)?.uid }} </div>
<button *ngIf="!(auth | async)" (click)="login()">Login</button>
<button *ngIf="auth | async" (click)="logout()">Logout</button>
What could be the issue here? How can I ensure correct evaluation of this scenario?