How to Iterate Over Object Keys and Values with *ngFor in Angular

By the end of this page, you will understand why *ngFor works directly with arrays but not plain objects, and how Angular lets you iterate over object properties using the built-in keyvalue pipe. You will also learn how to access both the key and the value, display nested data, avoid common mistakes, and choose between looping over objects and converting data into arrays.

*ngFor is designed to loop over iterables, most commonly arrays. A plain JavaScript object is not an iterable in the same way an array is.

For example, this works:

items = ['a', 'b', 'c'];

<li *ngFor="let item of items">{{ item }}</li>

But this does not work the same way for a plain object:

demo = {
  key1: 'value1',
  key2: 'value2'
};

That is because demo is a key-value object, not an array.

In Angular, the usual solution is to use the built-in keyvalue pipe, which converts an object into an array of entries. Each entry has:

• key
• value

So Angular can then loop through those entries with *ngFor.

This matters in real programming because many APIs and configuration objects return data as objects rather than arrays. If you know how to iterate through object properties safely, you can render dynamic menus, settings panels, grouped data, and API responses more easily.

Think of an array as a numbered list:

• position 0
• position 1
• position 2

*ngFor naturally walks through that list one item at a time.

Now think of an object as a labeled set of drawers:

• drawer key1
• drawer key2

Each drawer has a label (the key) and something inside it (the value).

*ngFor cannot directly walk through drawers unless Angular first turns them into a list. The keyvalue pipe does exactly that: it turns the drawers into a list of { key, value } pairs so Angular can loop over them.

Basic syntax with keyvalue

<li *ngFor="let item of demo | keyvalue">
  {{ item.key }}: {{ item.value }}
</li>

Example with your object

demo = {
  key1: [{ key11: 'value11' }, { key12: 'value12' }],
  key2: [{ key21: 'value21' }, { key22: 'value22' }]
};

<ul>
  <li *ngFor="let item of demo | keyvalue">
    <strong>{{ item.key }}</strong>
    <pre>{{ item.value | json }}</pre>
  </li>
</ul>

What this gives you

For each property in demo:

Consider this data:

demo = {
  key1: 'apple',
  key2: 'banana'
};

And this template:

<ul>
  <li *ngFor="let item of demo | keyvalue">
    {{ item.key }} = {{ item.value }}
  </li>
</ul>

Step by step

1. Angular evaluates demo.
2. The keyvalue pipe converts it into something like:

[
  { key: 'key1', value: 'apple' },
  { key: 'key2', value: 'banana' }
]

1. *ngFor loops over that array.
2. On the first iteration:
   • item.key is key1

Iterating over object keys and values is common in Angular applications when data is not stored as a simple array.

Common scenarios

• Settings pages
  • Example: an object of feature flags like { darkMode: true, notifications: false }
• Grouped API responses
  • Example: products grouped by category name
• Dynamic forms
  • Example: field names and validation rules stored in an object
• Translation dictionaries
  • Example: language keys like { welcome: 'Hello', logout: 'Sign out' }
• Dashboard widgets
  • Example: metrics returned as { users: 120, sales: 45, revenue: 9000 }

Example: rendering app settings

settings = {
  darkMode: true,
  emailAlerts: false,
  autoSave: true
};

<div *ngFor="let setting of settings | keyvalue">
  {{ setting.key }}: {{ setting.value }}
</div>

In real projects, developers often use object iteration in a few predictable ways.

1. Rendering dynamic sections

A backend may return grouped data as an object:

ordersByStatus = {
  pending: [{ id: 1 }, { id: 2 }],
  shipped: [{ id: 3 }]
};

Then the template renders each section dynamically.

2. Guarding against missing data

Developers often combine object iteration with guard clauses in the template or component.

<div *ngIf="ordersByStatus">
  <div *ngFor="let group of ordersByStatus | keyvalue">
    {{ group.key }}
  </div>
</div>

This avoids errors when data has not loaded yet.

3. Converting objects into arrays in the component

Sometimes teams prefer preparing data before it reaches the template.

entries = Object.entries(this.demo).( ({ key, value }));

1. Trying to loop over an object directly

Broken example:

<li *ngFor="let key of demo">{{ key }}</li>

Why it fails:

• demo is an object, not an array
• *ngFor expects something iterable

Fix:

<li *ngFor="let item of demo | keyvalue">
  {{ item.key }}
</li>

2. Using old AngularJS syntax in Angular

Broken example:

<div ng-repeat="(key, value) in demo"></div>

Why it fails:

• ng-repeat is AngularJS syntax
• Angular uses *ngFor

Fix:

pipe vs converting in the component

Quick syntax

Loop over object entries:

<div *ngFor="let item of myObject | keyvalue">
  {{ item.key }}: {{ item.value }}
</div>

Entry shape

Each item has:

{
  key: string,
  value: any
}

Nested object loop

<div *ngFor="let group of demo | keyvalue">
  {{ group.key }}
  <div *ngFor="let child of group.value">
    {{ child | json }}
  </div>
</div>

Remember

• *ngFor works naturally with arrays
• plain objects need keyvalue
• use item.key for the property name
• use for the property value

How do I get object keys in Angular template?

Use the built-in keyvalue pipe:

<div *ngFor="let item of obj | keyvalue">
  {{ item.key }}
</div>

How do I get both key and value with *ngFor?

Use item.key and item.value after applying the keyvalue pipe.

Can *ngFor iterate over a plain JavaScript object directly?

No. It is meant for iterables such as arrays. For objects, use keyvalue or convert the object into an array in the component.

Is there a built-in pipe for object iteration in Angular?

Yes. Angular provides the keyvalue pipe.

What if the object value is an array?

You can use another *ngFor inside the first one to loop through that array.

Should I use keyvalue in the template or Object.entries() in the component?

• *ngFor — the Angular structural directive used to repeat template blocks.
• keyvalue pipe — the built-in Angular pipe for iterating over object properties.
• Arrays in JavaScript — important because *ngFor works directly with arrays.
• JavaScript objects — needed to understand key-value data structures.
• Nested loops — useful when object values contain arrays or other objects.
• *ngIf — often used with *ngFor to guard against missing data.
• Object.keys() — a JavaScript way to extract object keys manually.
• Object.entries() — a JavaScript way to convert an object into key-value pairs.
• JSON rendering — helpful for debugging unknown object structures with the json pipe.