How to Loop through Object with *ngFor in Angular ? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Table of Content Steps for Installing & Configuring the Angular ApplicationProject StructureUsing PipeUsing Object.keys() MethodSteps 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 appnameProject 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 { } Output: Using Object.keys() Method The Object.keys() method returns an Array Iterator object with the keys of an object. We will get those keys of our object and iterate over the object using ngFor. Example: This is another example that 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> <li *ngFor="let key of keys()">{{key}}:{{states[key]}}</li> JavaScript // app.component.ts import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: "./app.component.html", styleUrls: ['./app.component.css'] }) export class AppComponent { states: Dictionary; constructor() { this.states = { 'Uttar Pradesh': 'Lucknow', 'Tripura': 'Agartala', 'West Bengal': 'Kolkata', 'Rajasthan': 'Jaiput' }; } keys(): Array<string> { return Object.keys(this.states); } } interface Dictionary { [index: string]: string } 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 { } Output: Comment More infoAdvertise with us Next Article How to Loop through array of JSON object with *ngFor in Angular ? N nikitamehrotra99 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to Loop through array of JSON object with *ngFor in Angular ? JavaScript Object Notation (JSON) is a text-based, human-readable interchange format used for representing simple data structures and objects in web browser-based code. In order to Loop through an array of JSON objects, the *ngFor directive can be utilized that helps to dynamically generate HTML con 3 min read How to limit the ngFor Loop to Two Iterations in Angular ? The NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. In this article, we will learn how to Limit the ngFor loop to two iterations. Table of Content Steps for Installing & Configuring the Angular ApplicationProje 3 min read How to iterate over Object in Angular ? Objects consist of a set of key-value pairs, which are known as Properties. All Properties are named in JavaScript objects and the key part represents the Property name, while the value part represents the property Value. Each element(key-value pair) of the object can be utilized to perform a specif 3 min read How to limit ngFor repeat to some number of items in Angular ? In AngularJS, we can use the ngFor directive to loop over a list of items and display them on a webpage. Although, there could be some cases where we don't want to use all the elements in the list but want to display only a limited number of initial items, or the paginated items from the list. In th 3 min read How to change color of the Object value in Angular ? 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. JSON objects are key: value pairs. In this article, we will learn How to change the color of the object value in Angular. Steps for Insta 3 min read How to group data with Angular filter ? The task is to show how to group-data with an Angular-filter. Steps involved: 1. You can install angular-filter using these four different methods: Clone & build https://github.com/a8m/angular-filter git repositoryVia Bower: by running $ bower install angular-filter from your terminalVia npm: by 2 min read Like