Saltar al contenido

NgIf angular, tutorial más con examplesJan, 5thIn este tutorial, vamos a aprender acerca de cómo utilizar ngIf …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar Directiva ngIf para mostrar condicional o elementos de esconderse en angular.

* Directiva ngIf

El * ngIf une directiva a una expresión, si el valor de la expresión se evalúa a cierto, entonces el elemento se añade a dom de lo contrario el elemento no se agrega al dom.

Este ejemplo muestra cómo utilizar Directiva * ngIf.

import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
isActive = true;
}

Hello angular

En el código anterior, hemos añadido * ngIf = “isActive” al elemento H1 y la propiedad isActive es cierto por lo que podemos ver elemento H1 en el DOM.

Nota: El asterisco * Es importante agregar delante de la Directiva ngIf.

Si queremos ocultar el elemento h1, podemos hacerlo mediante la adición de una! signo negativo delante de isActiveproperty.

Hello angular

La extensión * Directiva ngIf con else

En lugar de mostrar y ocultar el mismo elemento que podemos hacer que el elemento diferente si nuestra proporcionado expresión se evalúa a falso utilizando else.

Ejemplo:

Hello angular

Hello React

<
g-template>

Aquí hemos incluido otro notActive la directiva * ngIf por lo que podemos utilizar #notActive como variable de referencia para mostrar el elemento diferente si nuestros evalúa expresión, a condición de falso.

Por qué utilizamos ng-plantilla?

El ng-plantilla es un elemento angular para hacer que el HTML, utilizando ng-plantilla sustituye angulares del elemento dotado de un comentario y sólo hacer que el elemento cuando es necesario, como en nuestro ejemplo, NG-plantilla sólo hace que el elemento cuando un sentencia else está activo.

Si no se siente cómodo con esta sintaxis más, también podemos lograr el mismo (si, otra) cosa usando! señal de negación.

Ejemplo:

Hello angular

Hello React

En el código anterior, el primer elemento h1 hará que cuando un isActive es verdadera y segundo elemento h1 hará que cuando un isActive no es cierto, significa que el caso (falsa o más).