Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro após adicionar *ngIf no template

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>
1 resposta
solução!

Mil perdões, depois que abri o tópico é que verifiquei que o meu HomeModule não importava o módulo CommonModule como deveria.

Bastou adicionar que o problema foi resolvido:

import { NgModule } from "@angular/core";
import { SignInComponent } from "./signin/signin.component";
import { ReactiveFormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { VMessageModule } from "../shared/components/vmessage/vmessage.module";
import { RouterModule } from "@angular/router";
import { SignUpComponent } from "./signup/signup.component";
import { FormsModule } from "@angular/forms";

@NgModule({
    declarations: [ 
        SignInComponent, 
        SignUpComponent ],
    imports: [
        CommonModule, 
        FormsModule,
        ReactiveFormsModule,
        VMessageModule,
        RouterModule
    ]
})
export class HomeModule {}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software