Angular standalone: ​Component does not render when using *ngIf with Signal

The idea is to make a header with a "Login" button and when the user logs in this button disappears and renders something like "Hello, username" however, when increasing the NG-IF logic my screen does not render my frontend. I am using the following authService:

import { HttpClient } from "@angular/common/http";
import { computed, Injectable, signal } from "@angular/core";
import { Observable } from "rxjs";

@Injectable({
providedIn: 'root'
})
export class AuthService {
private apiUrl = 'http://localhost:8080/api';

private userSignal = signal<{ name: string } | null>(null)

constructor(private http: HttpClient) { this.restoreSession() };
user = computed(() => this.userSignal());

login(userEmail: string, password: string): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, {
userEmail: userEmail,
password: password
});
}

register(firstName: string, lastName: string, userEmail: string, password: string): Observable<any> {
return this.http.post(`${this.apiUrl}/register`, {
firstName: firstName,
lastName: lastName,
userEmail: userEmail,
password: password
}, { responseType: 'text' })
}

restoreSession(): void {
const storedUser = localStorage.getItem('user')
if (storedUser) {
this.userSignal.set(JSON.parse(storedUser))
}
}
}


I am importing into my HeaderComponent

import { Component, computed, Signal } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AuthService } from "../../services/auth.service";
import { NgIf } from "@angular/common";

@Component({
selector: 'app-header',
standalone: true,
imports: [RouterModule, NgIf],
templateUrl: './header.component.html',
styleUrl: './header.component.css'
})
export class HeaderComponent {
user: Signal<{ name: string } | null>;

constructor(private authService: AuthService) {
this.user = this.authService.user
}
}


And I apply the logic in my header.component.html

<header class="header-container">
<div class="logo">
<img src="assets/logo.png" alt="logo" class="logo-img">
</div>

<a routerLink="/">Início</a>
<a routerLink="/catalog">Catálogo</a>
<span *ngIf="user() as currentUser">Olá, {{ currentUser.name }}</span>
<button *ngIf="!user()" class="button" routerLink="/login">Entrar</button>
</header>


But when I run my application all my pages are blank



How can I fix this error? I would like you to help me and explain where the error in my logic is.

Continue reading...