Understanding With NgFor Loop In Angular

ng-for loop

 

The ng-for loop is a structural directive. We will see how to change the structure of the dom.

 

Point is to repeat given HTML ones for each value in an array[]. Context is each time passing the array value for string interpolation or binding.

 

The syntax is *for =” let <value> of collection.”

 

<value> is a variable name, <collection.> is a property on your component which holds a collection, usually an array but anything that can be iterated.

 

Ng-For - local variable

• Index - used to provide the index for the current element while iteration.
• First - return true if the current element is the last in the iteration otherwise it is false.
• Even - return true if current elements are even elements based on the index in the iteration otherwise false.

It is used to execute the block of code to a specific item number. A for loop is contains the initialization, condition, and increment/ decrement in a single line, which provides easy debug, and structure of looping.

• The for loop is used to control the repeated statements.
• A for loop is worked till the condition is (found)/matches successfully.
• A for-loop id is used to repeat a portion of part of the HTML template once per item from an iterable list. 

Example

 

First, you have to create an application using the command " ng serve". Then open this project and then create a component using the command " ng g component loops". Go to the .ts file and take a variable array type. and then put the few values. Then go to the HTML file and make a list. Take a list item and then put the *ng-for loop. Then take put this variable name in the interpolation with the variable name like - {{student.name}}. 

 

Now save all the files. 

 

for-loop.html

<h2><p>Understanding with Ng For loop</p></h2>
<h3><p>For loop in Angular</p></h3>

<ul>
    <li *ngFor='let student of students;'>
      {{i+1}}    -     {{student.name}} - {{f}} - {{l}}   -{{ev}}   -   {{od}}
</ul>

foor-loop.ts

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-loops',
    templateUrl: './loops.component.html',
    styleUrls: ['./loops.component.css']
})
export class LoopsComponent {
    students: any[] = [{
        'name': 'Chaman Gautam'
    }, {
        'name': 'Ravi Gautam'
    }, {
        'name': 'Mohit sharma'
    }, {
        'name': 'Gaurav Sharma'
    }, {
        'name': 'Gaurav Kumar'
    }, {
        'name': 'Sandeep singh'
    }, {
        'name': 'Sumit Nimmi'
    }, {
        'name': 'Deepak'
    }, {
        'name': 'Vikas'
    }];
}

module.ts

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

import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule } from '@angular/common/http'
import { AppComponent } from './app.component';
import { AddComponent } from './add/add.component';
import { RouterModule, Routes} from '@angular/router';
import{BookService } from './book.service';
import {InMemoryWebApiModule } from 'angular-in-memory-web-api';
import {TestData } from './testdata'

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ShowdataComponent } from './showdata/showdata.component';
import { CommonModule } from '@angular/common';
import { IfelseComponent } from './ifelse/ifelse.component';
import { SwitchComponent } from './switch/switch.component';
import { LoopsComponent } from './loops/loops.component';
const routes: Routes = [
  {path:'', component:AddComponent},
  { path:'add', component:AddComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    AddComponent,
    ShowdataComponent,
    IfelseComponent,
    SwitchComponent,
    LoopsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,RouterModule.forRoot(routes),ReactiveFormsModule, FormsModule,
    HttpClientModule, CommonModule,
    InMemoryWebApiModule.forRoot(TestData)
  ],
  providers: [BookService],
  bootstrap: [ LoopsComponent]
})
export class AppModule { }

mains.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dhwani</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-loops></app-loops>
</body>
</html>

Now compile the project using the command " ng serve", after compiling this project you have to open the web browser and hit " localhost:4200" after few seconds you can see that your system shows the output like,

 

 

Now you can see that all data will be display. 

 

Now use the indexing in the list.

 

index.html

<h2><p>Understanding with Ng For loop</p></h2>
<h3><p>For loop in Angular</p></h3>

<ul>
    <li *ngFor='let student of students; let i=index;'>
      {{i+1}}
</ul>

Now save all the data and refresh the browser, and after refresh, the browser the output will be shown like,

 

Output

 

 

Now you can see that there is a hit numbering that will be shown the number with each item.

 

Now use the true false and even odd for the last and first in the index like,

<h2><p>Understanding with Ng For loop</p></h2>
<h3><p>For loop in Angular</p></h3>

<ul>
    <li *ngFor='let student of students; let i=index; let f=first;
let l=last; let ev=even;let od=odd'>
      {{i+1}}    -     {{student.name}} - {{f}} - {{l}}
</ul>

Now save all the data and refresh the browser, and after the refresh, the browser shows the output like below,

 

OUTPUT

 

 

Now you can see that the output will be shown true false for the last and first value.

 

I hope you enjoy this article. Follow Chaman Gautam to learn more about angular and follow C# Corner to learning more about more technology.