Ejemplo básico ngIf
Voy a mostrar un mensaje condicionado a la pulsación de un botón.
Vista:
<div class="container">
<div class="row">
<div class="col">
<label>Título de persona</label>
<input type="text" class="form-control" [(ngModel)]="tituloPersona" />
<button class="btn btn-primary" (click)="onCrearPersona()">
Agregar persona
</button>
<p *ngIf="personaCreada">{{ agregarPersonaStatus }}</p>
</div>
</div>
</div>
Componente:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "Directiva *ngIf";
tituloPersona;
agregarPersonaStatus: string = "Persona agregada";
personaCreada: boolean = false;
onCrearPersona(): void {
console.log("onCrearPersona");
this.personaCreada = true;
}
}
Proyecto en Stackblitz ngif-app-ex-01: