View video tutorial
ANGULAR ngFor directive
ANGULAR
The Angular ngFor directive is a structured directive used to iterate over a collection of data.
Angular ngFor directive
➔ The Angular ngFor directive is a structured directive used to iterate over a collection of data and dynamically add elements for each item.
➔ This collection of data can be an array or an object.
➔ This example shows how the ngFor structural directive works in Angular.
Create a project by ng new angular-ngfor command.
ng new angular-ngfor
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code and try it out practically in your learning environment.
app.component.ts file
Copy this file content to the target file.
Example
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-ngfor';
showcard = false;
showdialog = false;
allPorducts = [
{id:101, name:"Item1", stock:5, price:50},
{id:102, name:"Item2", stock:10, price:100},
{id:103, name:"Item3", stock:20, price:200}
]
product:any;
getProduct(product:any){
this.product = product;
}
}
Copy the code and try it out practically in your learning environment.
HTML app.component.html File
Copy this file content to the target file.
Example
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Stock</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of allPorducts" (click)="getProduct(p)" data-bs-toggle="modal"
data-bs-target="#exampleModal">
<th scope="row">{{p.id}}</th>
<td>{{p.name}}</td>
<td>{{p.stock}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-2">
<input type="checkbox" name="showcard" [(ngModel)]="showcard"> Show Data
</div>
<div class="col-3">
<input type="checkbox" name="showdialog" [(ngModel)]="showdialog"> Show Dialog
</div>
</div>
</div>
<div class="container">
<div class="row" *ngIf="showcard">
<div class="col" *ngIf="product">
<div class="card" style="width: 18rem;">
<div class="card-header">
Name: {{product.name}}
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Id: {{product.id}}</li>
<li class="list-group-item">Quantiy: {{product.stock}}</li>
<li class="list-group-item">Price: {{product.price}}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button> -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
*ngIf="product && showdialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Name: {{product.name}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Id: {{product.id}}</li>
<li class="list-group-item">Quantiy: {{product.stock}}</li>
<li class="list-group-item">Price: {{product.price}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
Copy the code and try it out practically in your learning environment.
HTML index.html File
Copy this file content to the target file.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularNgfor</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Copy the code and try it out practically in your learning environment.
Output
Run project by ng serve in command line (from inside project directory).
program output