Skip to main content

angular - How to use nested loop

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  employees = [
    {
      name:'Jenny',
      email:'jenny@example.com',
      dept:['accounting','admin','tech']
    },
    {
      name:'Jones',
      email:'jones@example.com',
      dept:['marketing','admin']
    },
    {
      name:'Raymond',
      email:'raymond@example.com',
      dept:['admin','tech']
    },
    {
      name:'Jack',
      email:'jack@example.com',
      dept:['accounting','admin','tech','development']
    }
  ];
}
app.component.html 

<h2>Angular Nested Loop</h2>

<div *ngFor="let employee of employees">
    {{employee.name}} : {{employee.email}}
    <ul *ngFor="let department of employee.dept">
        <li>{{department}}</li>
    </ul>
</div>
More Angular tutorials
Labels: