Directivas en Angular 4 y ngFor

Las directivas en Angular permiten manipular datos y vistas de forma clara y eficiente. Aquí verás cómo los componentes, las directivas estructurales y las de atributos trabajan juntas para actualizar el DOM sin duplicar código, con énfasis en ngFor para listas dinámicas.

¿Qué son las directivas en Angular y cuántos tipos hay?

Las directivas son instrucciones que Angular aplica sobre elementos de HTML para cambiar su comportamiento o representación. Existen tres tipos principales y cada una cumple un rol clave.

• Componentes: siempre tienen una template de HTML asociada.
• Directivas estructurales: modifican el DOM para mostrar, ocultar o repetir elementos. Ejemplo: ngFor para iteraciones.
• Directivas de atributos: ajustan la apariencia o comportamiento del elemento al que están asignadas. Por ejemplo, marcar en una lista si es perro o gato con un fondo distinto.

La idea central: evitar escribir miles de líneas de HTML y, en su lugar, declarar datos en TypeScript y dejar que Angular los pinte en pantalla.

¿Cómo usar ngFor para listar datos sin duplicar código?

Con ngFor puedes repetir un elemento de lista tantas veces como haya elementos en un arreglo. Ideal para directorios extensos, como “12 000 personas” o cientos de negocios, sin escribir cada ítem a mano.

¿Cómo preparar los datos en TypeScript?

Primero, define un arreglo en el componente. Se usa un arreglo de objetos con una propiedad nombre. Mantén el constructor y el title si ya existen.

export class AppComponent {
  title = 'Platzi Square';
  lugares: any[] = [
    { nombre: 'La Gardenia' },
    { nombre: 'Donas' },
    { nombre: 'Veterinaria Huellitas Felices' }
  ];

  constructor() {}
}

Puntos clave: - Usar tipo any[] para aceptar cualquier objeto, tal como se mostró. - Cada elemento del arreglo representa un negocio con su nombre.

¿Cómo iterar en HTML con ngFor?

Crea una lista no ordenada y repite el ítem con la directiva estructural. Nota: las directivas estructurales empiezan con asterisco y su nombre va en camelCase.

<ul>
  <li *ngFor="let lugar of lugares">
    {{ lugar.nombre }}
  </li>
</ul>

Sintaxis y conceptos: - Asterisco al inicio: indica directiva estructural. - let lugar: declara una variable por iteración. - of lugares: recorre el arreglo lugares. - {{ ... }}: usa string interpolation para mostrar lugar.nombre.

¿Qué ventajas trae en listas grandes?

• Menos HTML: una sola línea repite tantos elementos como haya en el arreglo.
• Mantenimiento simple: agregas o quitas datos en TypeScript, la vista se actualiza.
• Claridad: la lógica de iteración queda declarativa, sin for manual ni manipulación del DOM.

¿Cómo ayudan las directivas de atributo a dar contexto visual?

Las directivas de atributos permiten comunicar estado o categoría con estilo visual. Por ejemplo, en una lista de mascotas de una guardería, se puede decidir que “perritos” lleven fondo café y “gatitos” fondo azul para identificar rápidamente.

Ideas clave: - Se configuran mediante un atributo en el HTML del elemento objetivo. - Controlan cómo “se despliega” o “qué hace” el elemento. - Complementan a ngFor para mostrar grandes listas con señales visuales claras.

¿Te gustaría ver también un ejemplo con ngIf y estilos condicionales en tu proyecto? Comparte tus dudas y casos de uso en los comentarios.