*ngFor directive in Angular
*ngFor is used to loop through the dynamic lists in the DOM. Simply, it is used to build data presentation lists and tables in HTML DOM.
Syntax:
<element *ngFor="let item of items">...</element>
Uses of *ngFor Directive:
- Rendering Lists:
*ngForis primarily used for rendering lists of items retrieved from APIs, databases, or local data sources, providing a dynamic and data-driven user interface. - Dynamic Table Rows:
*ngForcan be used to generate table rows dynamically based on the data in the underlying collection, allowing for the creation of dynamic and responsive tables. - Iterating Over Object Properties:
*ngForcan iterate over the properties of an object, allowing you to render key-value pairs dynamically in the UI.
In Angular, *ngFor is used to iterate over a list of items. Here in ngfor, we need a local varable which represents each item in the object boxes which we have created in app.components.ts file. Now we will iterate over each item in boxes and show its proprties (size, color, height) using *ngFor directive in angular. For showing the object we need to provide a template for each item in boxes.
Example:
<!-- app.component.html -->
<div class="center">
<h2 class="green">
w3wiki
</h2>
<h2 class="title">
*NgFor directive in <span class="angular">Angular</span>
</h2>
<div class="bgGreen">
<div *ngFor="let box of boxes">
{{box.size}},
{{box.color}},
{{box.height}}
</div>
</div>
</div>
/* app.component.css */
.center {
display: grid;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.5rem;
}
.green {
color: rgb(28, 143, 28);
font-size: 2.5rem;
text-align: center;
}
.title {
color: rgb(57, 23, 180);
text-align: center;
}
.angular {
color: rgb(237, 40, 40);
font-size: 2.1rem;
}
.bgGreen {
background-color: rgb(28, 143, 28);
color: #ffff;
}
// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { NgFor } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, CommonModule, NgFor],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'structuralD';
boxes = [
{ size: "SM", color: "white", height: 5 },
{ size: "M", color: "grey", height: 10 },
{ size: "L", color: "Green", height: 15 },
{ size: "XL", color: "Orange", height: 20 },
{ size: "XXL", color: "Black", height: 25 }
];
}
Output:
*ngFor directive in Angular
Use of *ngIf and *ngFor Directives in Angular
Angular is a very popular framework for building scalable web applications. It provides many features and tools to make the development process smooth. Two important directives in Angular are *ngIf and *ngFor. *ngIf is used to conditionally render HTML elements, while *ngFor is used to iterate over a collection of data. In this article, we will learn the use of *ngIf and *ngFor directives in Angular.
Contact Us