How to Loop through Object with *ngFor in Angular ?
Last Updated :
24 Apr, 2025
JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is used by different web applications to communicate with each other. In this article, we will learn Loop through Object with *ngFor in Angular.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:

Using Pipe
Angular has added a new built-in pipe to help you iterate through JSON objects, in the common module of the Angular package.
Example: This example illustrates iterating over them using ngFor in Angular.
HTML
<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>Loop through Object with *ngFor </h2>
<div *ngFor="let item of organism | keyvalue">
organism: <b>{{item.key}}</b> and Type: <b>{{item.value}}</b>
</div>
JavaScript
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { KeyValue } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: "./app.component.html",
styleUrls: ['./app.component.css']
})
export class AppComponent {
organism: { [key: string]: string } =
{
'Wood': 'Abiotic',
'Plants': 'Biotic',
'Fan': 'Abiotic',
'Animals': 'Biotic'
};
}
JavaScript
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { HttpClientModule }
from '@angular/common/http';
import { AppComponent }
from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }