python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 nested loops

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 {DateServiceServicefrom '../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!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions