Após inserir o *ngIf na div que mostra o nome do usuário logado, o angular passou a lançar a seguinte mensagem de erro:
Error: Template parse errors: Can't bind to 'ngIf' since it isn't a known property of 'div'. (" ALURAPIC
<div [ERROR ->]*ngIf="user; else login">
<i class="fa fa-user-circle mr-1"></i>
<a class=""): ng:///CoreModule/HeaderComponent.html@4:13
Can't bind to 'ngIfElse' since it isn't a known property of 'div'. (" ALURAPIC
Lembro que esse erro já havia acontecido anteriormente em outro módulo do curso, e era resolvido apenas importando o CommonModule. Mas notei que durante a aula o HeaderComponent não tem esse módulo importado e não apresentou erro. O que há de diferente, então ?
Segue abaixo o código atual do Header Component e de seu template:
header.component.ts
import { Component } from "@angular/core";
import { UserService } from "../user/user.service";
import { Observable } from "rxjs";
import { User } from "../user/user";
import { Router } from "@angular/router";
@Component({
selector: 'ap-header',
templateUrl: './header.component.html'
})
export class HeaderComponent {
user$: Observable<User>;
user: User;
constructor(
private userService: UserService,
private router: Router) {
this.user$ = userService.getUser();
this.user$.subscribe(user => this.user = user)
}
logout() {
this.userService.logout();
this.router.navigate(['']);
}
}
header.component.html
<header class="sticky-top">
<nav class="navbar navbar-light bg-white">
<a class="navbar-brand">ALURAPIC</a>
<div *ngIf="user; else login">
<i class="fa fa-user-circle mr-1"></i>
<a class="ml-1">{{ user.name }}</a>
<a (click)="logout()"> Logout</a>
</div>
<ng-template #login>
<span class="navbar-text">Please, login</span>
</ng-template>
</nav>
</header>