📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.
Video
Create an Angular Component - NgforComponent
C:\Angular\angular8-helloworld-example-tutorial\src\app> ng g c ngfor
CREATE src/app/ngfor/ngfor.component.html (20 bytes)
CREATE src/app/ngfor/ngfor.component.spec.ts (621 bytes)
CREATE src/app/ngfor/ngfor.component.ts (265 bytes)
CREATE src/app/ngfor/ngfor.component.css (0 bytes)
UPDATE src/app/app.module.ts (724 bytes)
ngfor.component.ts - NgforComponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ngfor',
templateUrl: './ngfor.component.html',
styleUrls: ['./ngfor.component.css']
})
export class NgforComponent implements OnInit {
constructor() { }
ngOnInit() {
}
users = [{
id: 100,
firstName: "Ramesh",
lastName: "Fadatare",
emailId: "ramesh@gmail.com"
},
{
id: 101,
firstName: "Tony",
lastName: "Stark",
emailId: "tony@gmail.com"
}, {
id: 100,
firstName: "Tom",
lastName: "Cruise",
emailId: "tom@gmail.com"
}];
}
ngfor.component.html - ngFor Directive Examples
<div class="container">
<h1> ngFor Directive Examples</h1>
<!-- ngFor Directive with Table Example -->
<b> ngFor Directive with Table Example</b>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.emailId}}</td>
</tr>
</tbody>
</table>
<!-- ngFor - simple example -->
<b> ngFor - simple example</b>
<ul>
<li *ngFor="let user of users">
{{user.firstName}}, {{user.lastName}}
</li>
</ul>
<!-- ngFor - variable ccope example -->
<b> ngFor - variable ccope example </b>
<ul>
<li *ngFor="let user of users" [type]="element">
{{user.firstName}}, {{user.lastName}}
</li>
</ul>
<!-- ngFor - Get the index of each element example -->
<b> ngFor - Get the index of each element example </b>
<ul>
<li *ngFor="let user of users; let i = index">
{{i}}. {{user.firstName}}, {{user.lastName}}
</li>
</ul>
<!-- ngFor - first and last variable example -->
<b>ngFor - first and last variable example </b>
<div *ngFor="let user of users; let i = index; let f=first; let l=last;">
Row {{i}} : Name: {{user.firstName}} {{user.lastName}} , is first row: {{f}}, is last row: {{l}}
</div>
<!-- nfFor - even and odd variable example -->
<b>nfFor - even and odd variable example </b>
<div *ngFor="let user of users; let i = index; let e=even; let o=odd;">
Row {{i}} : Name: {{user.firstName}} {{user.lastName}} , is even row: {{e}}, is odd row: {{o}}
</div>
</div>
app-routing.module.ts - Add Entry Routing
{path: 'ng-for', component: NgforComponent}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { NgforComponent } from './ngfor/ngfor.component';
import { NgifComponent } from './ngif/ngif.component';
const routes: Routes = [
{path: '', component: HelloWorldComponent},
{path: 'hello-world', component: HelloWorldComponent},
{path: 'ng-for', component: NgforComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Output
Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.
Comments
Post a Comment
Leave Comment