Hoy vamos a hablar de la directiva Angular ngFor y las opciones que soporta. La directiva ngFor es la que se encarga de presentar una lista de elementos en pantalla de una forma sencilla combinando el concepto de bucle y plantilla . Esta directiva soporta muchas opciones, vamos a verlas
Angular ngFor directo
El primer paso va a ser crear un componente que nos devuelva una lista de cadenas (la lista mas básica a manejar). Este componente contendrá un array de Javascript.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hola5',
templateUrl: './hola5.component.html',
styleUrls: ['./hola5.component.css']
})
export class Hola5Component implements OnInit {
lista:string[]=["hola","que","tal","estas"];
constructor() { }
ngOnInit() {
}
}
Vamos a ver como se construye una primera versión de la plantilla que imprima la lista.
<table>
<tr *ngFor="let item of lista">
<td>
{{item}}
</td>
</tr>
</table>
Este es el ejemplo más sencillo y nos imprime la lista de cadenas como una tabla utilizando la directiva de ngFor
Angular ngFor e indices
La etiqueta ngFor soporta bastantes mas opciones , por ejemplo podemos acceder al indice del elemento e imprimirlo . Recordemos que en JavaScript los arrays comienzan en cero.
<table>
<tr *ngFor="let item of lista;let indice=index">
<td> {{indice+1}}
<td>{{item}}</td>
</tr>
</table>
En este caso hemos declarado una variable asociada al bucle y la imprimimos en una columna incrementado su valor.
Angular filas : pares impares
Vamos a ver ahora como gestionar el manejo de filas pares y filas impares de tal forma que podamos dibujar cada una de un color diferente.
El primer paso es generar los estilos a nivel de la css del componente.
.azul {
color:blue;
}
.verde {
color:green;
}
Una vez tenemos esto , nos queda ver como modificar la estructura de angular ngFor para que soporte estas opciones.
<table>
<tr *ngFor="let item of lista;let impar = odd;let par = even;" [ngClass]="{azul:par,verde:impar}">
<td>{{item}}</td>
</tr>
</table>
El resultado en pantalla iluminara las filas con colores alternos:
ngFor first y last
Angular soporta también la posibilidad de seleccionar el primer elemento y el último de una lista.
Vamos a verlo en código:
<table>
<tr *ngFor="let item of lista;let primero = first;let ultimo = last;" [ngClass]="{azul:primero,verde:ultimo}">
<td>{{item}}</td>
</tr>
</table>
El resultado lo vemos en la página HTML:
Otros artículos relacionados:
- Angular 5 Hello World y su funcionamiento
- React vs Angular 2 , frameworks vs librerias
- Angular resolve y manejo de rutas asíncronas
- Vuejs una alternativa a React y Angular
- Desarrollo Web con Angular.js (nº1 en Amazon.es programación)
Hola estoy realizando almacenando un id en un item de una coleccion al mostrar la coleccion quiero que haga la consulta a traves de un pipe y me retorne el nombre de ese id pero no me lo muestra como puedo realizarlo.
gracias
Deberías construir un custom pipe si quieres imprimir propiedades muy concretas
Hola que tal. Me podrian ayudar por favor. Lo que pasa que estoy realizando una tabla de amortizacion en angular aplico un ngFor en una tabla pero con dos for diferentes {{count}} {{mount}} el for de let count of plazos me genera n meses si pongo un plazo de 60 meses me realiza la numeracion del 1 al 60 o si quiero 12 meses pues del 1 al 12 ese es sin problemas el problema es en el let mount of montos. AHi realizo la resta del saldo total un ejemplo $12000 y si lo quiero a 12 meses daria… Read more »
Hola, he realizado una consulta desde una base de datos sql y he devuelto el array en un JSON, cree la lista y genero un ion-card con cada objeto, bien, el problema es que el card lleva un boton y al hacer click se debe ejecutar una función que necesita los valores en ese card.. como devuelvo de la vista al controlador la información del objeto seleccionado?
no lo puedes pasar como parámetro?
Hola.
Si tengo una tabla, como podria extraer por ejemplo los nombre que comiencen por la letra A
Gracias de antemano
Deberías desarrollar un custom pipe de angular