Angular 5 and 4 nested loops - ngFor

Nested loops - In this article I’m sharing with you for nested level of loops in Angular 5 and 4. You can see in the following steps.
Stayed Informed – Angular 5 and Angular 4 Documents

The Array collections is –

  users = [

    {name: "Anil Singh", qualification: ["B.Sc.", "MCA", "MCTS", "MCP"]},

    {name: "Reena Singh", qualification: ["B A", "M A", "BTC"]}

  ];

The Loops on above array –

<table *ngFor="let user of users">

  <tr>

    <td>{{user.name}}</td> <td>-</td>

  </tr>

  <tr *ngFor="let qualifica of user.qualification">

      <td></td> <td> {{ qualifica }} </td>

  </tr>   

</table>

The full example as following –

app.module.ts -

import { BrowserModule } from '@angular/platform-browser';

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

import {DateServiceService}  from '../app/date-service.service';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [DateServiceService],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts -

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

import {DateServiceService} from '../app/date-service.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular App';

  todayDate;

  users = [

    {name: "Anil Singh", qualification: ["B.Sc.", "MCA", "MCTS", "MCP"]},

    {name: "Reena Singh", qualification: ["B A", "M A", "BTC"]}

  ];

  constructor(private dateService : DateServiceService){

    this.todayDate = dateService.getTodayDate();

  }

}

app.component.html –

<div style="text-align:center">

  <h1>

    Welcome to {{title}}!

  </h1>

</div>

<h2>Angular 5 Services</h2>

<div>

  <h2>Today Is -</h2> {{todayDate}}

</div>

<h2>Angular 5 and 4 nested loops</h2>

<table *ngFor="let user of users">

  <tr>

    <td>{{user.name}}</td> <td>-</td>

  </tr>

  <tr *ngFor="let qualifica of user.qualification">

      <td></td> <td> {{ qualifica }} </td>

  </tr>   

</table>

The Result looks like –

The Video example as –

I hope you are enjoying with this post! Please share with you friends. Thank you!!