Cómo usar la directiva angular incorporada: ngIf, ngFor, ngClass y más

Puede agregar directivas al HTML en su proyecto Angular. Algunos controlan la estructura de su marcado mientras que otros se enfocan en los atributos.

Este artículo analizará las seis directivas angulares más comunes: ngFor, ngIf, ngClass, ngStyle, ngModel y ngSwitch.

¿Qué son las directivas angulares?

Las directivas de Angular le permiten usar sentencias if y bucles for, y agregar otro comportamiento al código HTML de un proyecto de Angular.

Directiva	Descripción
*ngSi	Puede usar ngIf cuando desee que ciertos bloques HTML solo se muestren si cumplen una determinada condición. Por ejemplo, si tiene un formulario con una ventana emergente que se muestra después de que un usuario haya ingresado datos para un campo determinado.
*ngPara	Puede usar ngFor si necesita que cierto bloque se repita muchas veces. Por ejemplo, si tuviera una lista de elementos y necesitara mostrar un div para cada elemento.
*ngClass	Esto agrega un estilo condicional usando una clase. Si una sentencia if cumple la condición, aplicará la clase especificada.
* estilo ng	Esto agrega un estilo en línea condicional. Si una sentencia if cumple la condición, aplicará los estilos especificados.
*ngModel	Esto le permite hacer un enlace bidireccional. Esto significa que puede pasar datos en ambas direcciones entre el archivo HTML y TypeScript. Por ejemplo, puede pasar el valor de un atributo del archivo TypeScript al archivo HTML y viceversa.
*ngSwitch	Esto le permite agregar una declaración de cambio con muchos casos para verificar muchos valores. Según los casos, se mostrarán ciertos elementos HTML.

Las directivas estructurales implican la estructura de los elementos HTML. Estos incluyen ngIf, ngFor y ngSwitch. Las directivas de atributos implican cambiar las propiedades de los elementos HTML. Estos incluyen ngStyle, ngClass y ngModel.

Cómo usar ngIf

Para usar ngIf, necesitará una condición para evaluar como verdadero para que se muestre un elemento HTML en particular.

1. Agregue dos variables a su archivo TypeScript. En este ejemplo, hay una variable noPlaylists y una variable para almacenar las listas de reproducción. Esta variable se evaluará como verdadera si la longitud de la matriz de listas de reproducción es 0.

   noListas de reproducción: booleano = falso;
   listas de reproducción: cualquier = [];
   constructor() { }
    ngOnInit(): vacío {
    if (this.playlists.length 0) {
    this.noPlaylists = verdadero;
    }
   }
   

2. En el HTML, agregue la instrucción *ngIf. Si noPlaylists es verdadero, aparecerá el mensaje de error contenido en el intervalo a continuación. De lo contrario, no lo hará. Puede aplicar ngIf a diferentes tipos de Etiquetas HTML.

   
   
   No hay listas de reproducción disponibles.
   
   
   
   

3. Para agregar un componente "else" a la instrucción if, deberá agregar el código HTML para la parte "else" en un bloque de plantilla.

   
   
   No hay listas de reproducción disponibles.
   
   
   
   
   
   
   Listas de reproducción encontradas.
   
   
   
   

Cómo usar ngFor

Si necesita repetir una cierta cantidad de bloques en una página, puede usar la directiva ngFor.

1. En el archivo TypeScript, agregue elementos a la matriz.

   listas de reproducción: cualquiera = [
    {"nombre": "Roca", "númeroDeCanciones": 5},
    {"nombre": "Contemporáneo", "númeroDeCanciones": 9},
    {"nombre": "Popular", "númeroDeCanciones": 14},
    {"nombre": "Acústico", "númeroDeCanciones": 3},
    {"name": "Canciones de boda", "numberOfSongs": 25},
    {"nombre": "Metal", "númeroDeCanciones": 0},
   ];
   

2. En el archivo HTML, agregue la instrucción *ngFor.

   Listas de reproducción encontradas.
   
   
   
   
   {{lista de reproducción.nombre}}
   {{playlist.numberOfSongs}} canciones
   
   
   
   
   
   
   

   Dentro de ngFor, podrá hacer referencia a cada objeto en la matriz usando la variable "lista de reproducción". "playlist.name" y "playlist.numberOfSongs" imprimirán ambos atributos dentro del etiqueta.

Cómo usar ngClass

Puede cambiar la clase de estilo que usa un div en particular, según una condición.

1. Agregue dos clases al archivo CSS con diferentes estilos. Puedes agregar cualquier tipo de Estilo CSS desee, como diferentes colores de fondo.

   .canciones {
    color de fondo: #F7F5F2;
   }
   .noCanciones {
    color de fondo: #FFA8A8;
   }

2. Dentro del bucle for del paso anterior, agregue la directiva de atributo ngClass. [ngClass]="lista de reproducción.numberOfSongs > 0? 'songs': 'noSongs'" está usando el mismo operador ternario que JavaScript y otros lenguajes de uso.

   
   
   
   
   {{lista de reproducción.nombre}}
   {{playlist.numberOfSongs}} canciones
   
   
   
   
   

   Si el número de canciones es mayor que cero, aplicará la clase "canciones" al div. Esto le dará al div un color de fondo gris. De lo contrario, si el número de canciones es cero, aplicará la clase "noSongs" al div. Esto le dará al div un color de fondo rojo.

Cómo usar ngStyle

En lugar de usar ngClass, puede usar ngStyle si desea aplicar estilos en línea en lugar de estilos a través de una clase.

1. Cambie ngClass del paso anterior para usar ngStyle en su lugar.

   
   
   {{lista de reproducción.nombre}}
   {{playlist.numberOfSongs}} canciones
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'negro': 'azul oscuro' }"

CuotaCuotaPíoCuotaCorreo electrónico

Temas relacionados

• Programación
• Programación
• JavaScript
• HTML
• CSS