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 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.

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:

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:

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: