Open In App

How to iterate over Object in Angular ?

Last Updated : 15 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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 specific action, as it permits access and manipulation of the properties and values stored in that object. In this article, we will see how to Iterate over object in Angular.

Table of Content

We will explore the above-mentioned approaches with the help of suitable examples.

Creating Angular application & Module Installation

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:

z132

Using Pipe

 The Pipe is a function that is used to modify the data before rendering it to the user. Some of the pre-built pipes are date, uppercase, lowercase, currency, decimal, number, etc. Angular has a powerful feature named Data binding which helps us to bind the class property to the HTML element property. With the help of built-in Pipes, we can iterate through objects, maps, and arrays, in the common module of the Angular package. The KeyValuePipe can help to transform the object into an array of key-value pairs.

Example: This example illustrates the iteration over the object in Angular using a built-in Pipe.

HTML




<!-- app.component.html -->
<h2 style="color: green">
  GeeksforGeeks
</h2>
<h2>
  How to Iterate over object in Angular ?
</h2>
<div *ngFor="let item of state | keyvalue">
    State: <b>{{item.key}}</b> and Capital: 
             <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 {
  
    state: { [key: string]: string } =
        {
            'Uttar Pradesh': 'Lucknow',
            'Madhya Pradesh': 'Bhopal',
            'Uttarakhand': 'Dehradun'
        };
  
}


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:

z136

Using Object.keys()

The Object.keys() method returns an Array Iterator object with the keys of an object. We will get the keys of our object and iterate over the object using ngFor Directive.

Example: This example illustrates the iteration over the object in Angular using Object.keys() Method.

HTML




<!-- app.component.html -->
<h2 style="color: green">
    GeeksforGeeks
</h2>
<h2>
    How to Iterate over object in Angular ?
</h2>
<ul>
    <li *ngFor="let key of keys()">
        {{key}}:{{states[key]}}
    </li>
</ul>


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:

z135



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads