Angular – Como hacer ngFor anidado

Si aun no conoces como funciona la directiva ngFor puedes consultar antes «Listar elementos en Angular con ngFor«, ahora cuando tenemos una lista y queremos iterarla con ngFor siempre tendremos la necesitad o el escenario donde tendremos una lista dentro de otra lista, como ejemplo, tendremos una lista de tareas y cada tarea tendrá usuarios que tienen asignada esa tarea, por lo que sera necesario iterar las tareas y dentro del detalle de cada tarea tendremos que iterar los usuarios asignadas a esa tarea, para este ejemplo continuaremos utilizando el ejercicio del post «Angular Ejemplo con la directiva ngIf «.

En este caso en cada tarea podemos tener una o mas personas asignadas en cada tarea, recuerda que lo principal cuando usamos angular, sobre todo las versiones mas recientes, es basarnos en interfaces, lo que permitirá mapear las propiedades de nuestro objeto.

Como puedes observar la interface que estamos utilizando para mapear a los propietarios de cada tarea es utilizando la propiedad owners y este es un array de Strings, en este caso por que lo único que devolvera el servicio son los avatars de la usuarios.

Ahora que ya tenemos la interface definida y ya sabemos que lo que queremos mostrar es solo los avatars de cada usuario, es iterar las tareas y dentro iterar las imagenes, es importante que para iterar en cualquier nivel utilicemos <ng-container></ng-container> ya que nos da una mejor estructura y permite mantener mas limpio nuestro código.

Como puedes ver lo primero que hacemos es iterar las tareas dentro del array Tasks y dentro colocamos un ng-container e iteramos la propiedad owners que es un elemento dentro del objeto Tarea, es decir, Tareas -> Tarea -> Owners -> Owner, en este caso Owners, solo es un array de strings pero se puede presentar el caso que sea un objeto, veamos el ejemplo como objeto.

Ahora te preguntaras cuantos niveles de anidación podemos tener, es decir imagina que tenemos lo siguiente Profesores -> Alumnos -> Contactos -> Teléfonos, es decir en este punto podemos hablar que tenemos 4 niveles de anidación, en este caso aplicaria lo mismo, lo importante es definir correctamente la interface y en caso de ser necesario agregar validaciones para controlar arrays vacios, lo que en ocaciones pueden romper los estilos. Lo que ahora te toca es ponerte creativo y controlar este tipo de escenarios, asi que colocare el ejemplo completo a continuación.