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
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!!