How can I use ngFor in Angular for complex data structures?

How can I use ngFor in Angular for complex data structures?

You can use ngFor to iterate over complex data structures like arrays of objects. For example, if you have an array of users, you can display their names and other properties.

Can you show me an example of that?

Sure! Here's a simple example:

<div *ngFor="let user of users">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
</div>

This will create a list of user names and emails.

What if I want to group users by a property?

You can use a combination of ngFor and a custom pipe to group users. First, create a pipe that groups users by the desired property, then use that pipe in your ngFor.

Can you provide a code snippet for the grouping pipe?

Absolutely! Here's a simple grouping pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'groupBy' })
export class GroupByPipe implements PipeTransform {
  transform(array: any[], field: string): any {
    return array.reduce((acc, obj) => {
      const key = obj[field];
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(obj);
      return acc;
    }, {});
  }
}

You can then use it in your template!