Directivas en Angular 4 y ngFor

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:39

Directivas en Angular 4 y ngFor

Curso de Angular 4

Clase 14 de 80

Clase 14 / 80

Recursos

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.

Sebas Cardona

Hace 8 años

Hola a todos,
pregunta: se necesita algún plugin o herramienta adicional para que funcione el *ngFor en atom??, es que tengo el código igual que el profe y no me da, muchas gracias.

Diego Forero

Team Platzi

Hace 8 años

No te funciona o no te auto completa? puedes instalar plugins en atom que te ayuden con el autocompletado y con coloreado de sintaxis, pero no me queda claro la parte que no te funciona en atom.

Sebas Cardona

Hace 8 años

gracias GOLLUM23, la verdad no fui claro, lo que pasa es que en atom ingrese el siguiente codigo en el .ts:

import { _Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})

export class AppComponent {
title = ‘platzisquare’;
lugares:any = [
{nombre:‘floreria la gardenia’},
{nombre:‘donas la pasadita’},
{nombre:‘veterinaria huellitas’},
];

constructor(){

}

y en el html se ingreso así:

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

tal y como dice el profe, pero cuando se compila y lo visualizo no me lo muestra como el ejemplo, de ahí la pregunta: si atom necesitaría alguna herramienta para que lea o reconozca TS? o si tengo algún error de sintaxis , muchas gracias por tu ayuda.

Comentarios (36)36 comentarios

Jesus Sandrea

Hace 9 años

Eduardo Pérez-Bermejo

Pablo Rivero

Junior Enrique Rojas

Karel Alexander Ponce Salcedo

Jherom Chacon

Ignacio Castillejo Gómez

Nicolas Iglesias Zingoni

Juan Esteban Deossa Pertuz

Hace 7 años

David Navarro Rolon

Víctor Hugo Rivas Sánchez

Alan Fermin

Enrique Ortuno

Onasis Gonzalo Soto Castro

Anthony Grimaldo Juarez Solis

Jesus Soto

Sebastian Jordan

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina