Accessing Key and Value with *ngFor in Angular

Understanding *ngFor in Angular:

• *ngFor is a structural directive in Angular that allows you to iterate over an array or object to create repeated elements in the template.
• It's commonly used to dynamically generate lists, tables, or other repetitive UI components based on data.

Accessing Key and Value with *ngFor:

When iterating over an object using *ngFor, you can access both the key and value of each property. Here's how:

1. Iterating over the Object:

   • Use the *ngFor directive on a template element (e.g., <li>, <tr>, <div>).
   • Assign the object you want to iterate over to the let keyword, followed by a variable name (e.g., let item).

2. Accessing Key and Value:

Example:

<ul>
  <li *ngFor="let item of myObject | keyvalue">
    Key: {{ item.key }} - Value: {{ item.value }}
  </li>
</ul>

Explanation:

• *ngFor="let item of myObject | keyvalue":
  • Iterates over each property in the myObject object.
  • The keyvalue pipe transforms each property into an object with key and value properties.
• {{ item.key }}: Displays the current property's key.

Additional Notes:

• The keyvalue pipe is a built-in Angular pipe that can be used with *ngFor to easily extract key and value pairs from objects.
• You can customize the template to display the key and value in any desired format or style.
• If you need to access the index of the current item during iteration, you can use the index variable provided by *ngFor.

Understanding the Example Codes

Example 1: Basic Iteration

<ul>
  <li *ngFor="let item of myObject | keyvalue">
    Key: {{ item.key }} - Value: {{ item.value }}
  </li>
</ul>

• *ngFor="let item of myObject | keyvalue":
  • *ngFor: This directive is used to iterate over an array or object.
  • let item: Creates a local variable item to represent each element during iteration.
  • myObject: The object you want to iterate over.
• {{ item.key }} and {{ item.value }}:
  • These expressions are used to display the key and value of the current item.

Example 2: Customizing the Output

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

• This example is similar to the first one, but it uses HTML elements (<span>) to customize the output format.

Example 3: Accessing Index

<ul>
  <li *ngFor="let item of myObject | keyvalue; let i = index">
    Index: {{ i }} - Key: {{ item.key }} - Value: {{ item.value }}
  </li>
</ul>

• The let i = index part adds an index variable to the iteration, allowing you to track the position of the current item.

Example 4: Using a Custom Comparator

<ul>
  <li *ngFor="let item of myObject | keyvalue:keepOriginalOrder">
    Key: {{ item.key }} - Value: {{ item.value }}
  </li>
</ul>

• In this example, a custom comparator function (keepOriginalOrder) is used to maintain the original key order of the object.

Key Points:

• The *ngFor directive is essential for iterating over arrays and objects in Angular templates.
• The keyvalue pipe is useful for extracting key-value pairs from objects.
• You can customize the output format and access the index of the current item using the *ngFor syntax.
• For more complex scenarios, you can use custom comparators to control the iteration order.

Alternative Methods for Accessing Key and Value with *ngFor in Angular

While the keyvalue pipe is a common approach, there are other methods you can use to access key and value in Angular's *ngFor directive:

Using Object.entries():

• JavaScript method: Object.entries() converts an object into an array of key-value pairs.
• Angular template:

<ul>
  <li *ngFor="let entry of Object.entries(myObject)">
    Key: {{ entry[0] }} - Value: {{ entry[1] }}
  </li>
</ul>

• Explanation:
  • Object.entries(myObject) converts myObject into an array of key-value pairs.
  • entry[0] and entry[1] access the key and value, respectively.

Using a Custom Pipe:

• Use the pipe:

  <ul>
    <li *ngFor="let entry of myObject | keyValuePairs">
      Key: {{ entry[0] }} - Value: {{ entry[1] }}
    </li>
  </ul>
  

• Create a custom directive:

  import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  
  @Directive({
    selector: '[keyValue]'
  })
  export class KeyValueDirective {
    @Input('keyValue') set object(obj: any) {
      Object.entries(obj).forEach(([key, value]) => {
        this.templateRef.createEmbeddedView(null, { $implicit: { key, value } });
      });
    }
  
    constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
  }
  

• Use the directive:

  <ul>
    <li *keyValue="myObject">
      Key: {{ $implicit.key }} - Value: {{ $implicit.value }}
    </li>
  </ul>
  

Using Object.keys() and Indexed Access:

• Iterate over keys and access values:

  <ul>
    <li *ngFor="let key of Object.keys(myObject)">
      Key: {{ key }} - Value: {{ myObject[key] }}
    </li>
  </ul>