En este artículo vamos a ver qué es NgFor en Angular 10 y cómo usarlo.
NgPor
Sintaxis:
<li *ngFor='condition'></li>
NgModule: El módulo utilizado por NgForOf es:
- CommonModule
Selectores:
- [ngPara]
Acercarse:
- Cree la aplicación angular que se utilizará
- No hay necesidad de ninguna importación para que se use NgFor
- En app.component.ts, defina la array que se usará con la directiva ngFor.
- En app.component.html, use la directiva NgFor con el elemento de lista para mostrar los elementos de la array.
- sirva la aplicación angular usando ng serve para ver el resultado
Ejemplo 1:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
a=['gfg1', 'gfg2', 'gfg3', 'gfg4']
}
app.component.html
<ul>
<li *ngFor='let i of a'> {{i}} </li>
</ul>
Producción:
Ejemplo 2:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
a=['gfg1', 'gfg2', 'gfg3', 'gfg4']
}
app.component.html
<ol>
<li *ngFor='let i of a'> {{i}} </li>
</ol>
Producción:
Referencia: https://angular.io/api/common/NgForOf