En este artículo, vamos a ver qué es NgIf en Angular 10 y cómo usarlo.
Directiva ngIf
Sintaxis:
<li *ngIf='condition'></li>
NgModule: El módulo utilizado por NgIf es:
- CommonModule
Selectores:
- [ngIf]
Acercarse:
- Cree una aplicación angular para usar.
- No hay necesidad de ninguna importación para que se use el NgIf .
- En app.component.ts, defina la variable para la cual se verificará la condición con la directiva ngIf .
- En app.component.html, use la directiva NgIf con las condiciones para verificar.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Ejemplo 1:
app.component.ts
import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformWorkerApp } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
myBool = true;
}
app.component.html
<div *ngIf = 'myBool'>Boolean is set to true</div>
Producción:
Ejemplo 2:
Javascript
import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformWorkerApp } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
variab = 10;
}
app.component.html
<div *ngIf = 'variab==1; else multi'>{{variab}}</div>
<ng-template #multi>
{{variab *2}}
</ng-template>
Producción:
Referencia: https://angular.io/api/common/NgIf