Tengo un par de botones que quiero mostrar solo si el usuario ha iniciado sesión. Mi problema es que *ngIf simple no funciona como yo quiero. Por ejemplo, tengo este botón Agregar receta:

 <div class="background"> <button type="button" *ngIf="isUserAuthenticated" class="btn btn-primary float-right m-2" data-bs-toggle="modal" data-bs-target="#exampleModal" (click)="addClick()" data-backdrop="static" data-keyboard="false"> Add Coffee </button>

Es un botón para mostrar modal. Quiero que ese botón se muestre solo si el usuario está autenticado. Así es como se ve mi .ts:

 export class RecipeDetailsComponent implements OnInit { ... public isUserAuthenticated: boolean = false; ngOnInit(): void { this.userService.authChanged .subscribe(res => { this.isUserAuthenticated = res; }) }

y mis métodos de servicio de usuario para verificar si están autenticados:

 export class UserService { private _authChangeSub = new Subject<boolean>() public authChanged = this._authChangeSub.asObservable(); public sendAuthStateChangeNotification = (isAuthenticated: boolean) => { this._authChangeSub.next(isAuthenticated); } public isUserAuthenticated = (): boolean => { const token = localStorage.getItem("token"); return token != null && this._jwtHelper.isTokenExpired(token) == false; }

El botón aparece solo si configuro isUserAuthenticated = true al declarar y se oculta si es falso. Supongo que el botón lee la propiedad isUserAthenticated y se muestra antes de ngOnInit. ¿Cómo puedo retrasar la visualización del botón hasta que se resuelva ngOnInit o simplemente actualizar después de eso?