Angular Series #2 — ngFor & ngFor trackBy

import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {constructor() { }ngOnInit() {}employees:any[]=[{empid:’1',name:’Vaibhav’},{empid:’2',name:’Employee1'},{empid:’3',name:’Employee2'}]}
<table><thead><tr><th>Employee ID</th><th>Employee Name</th></tr></thead><tbody><! — employees property contains array elemt of employees which defined in TS fileemployee is template input variable which is accessible by tr element and any of its child element --><tr *ngFor=”let employee of employees”><td>{{employee.empid}}</td><td>{{employee.name}}</td></tr></tbody></table>
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {employees:any[];constructor() {this.employees=[{empid:’1',name:’Vaibhav’},{empid:’2',name:’Employee1'},{empid:’3',name:’Employee2'}];}ngOnInit() {}getEmployee():void{this.employees=[{empid:’1',name:’Vaibhav’},{empid:’2',name:’Employee1'},{empid:’3',name:’Employee2'},{empid:’4',name:’Employee3'}];}}
<table><thead><tr><th>Employee ID</th><th>Employee Name</th></tr></thead><tbody><tr *ngFor=”let employee of employees”><td>{{employee.empid}}</td><td>{{employee.name}}</td></tr></tbody></table><br/><button (click)=”getEmployee()”>Refresh List</button>
import { Component, OnInit } from ‘@angular/core’;@Component({selector: ‘app-employee-details’,templateUrl: ‘./employee-details.component.html’,styleUrls: [‘./employee-details.component.css’]})export class EmployeeDetailsComponent implements OnInit {employees:any[];constructor() {this.employees=[{empid:’1',name:’Vaibhav’},{empid:’2',name:’Employee1'},{empid:’3',name:’Employee2'}];}ngOnInit() {}getEmployee():void{this.employees=[{empid:’1',name:’Vaibhav’},{empid:’2',name:’Employee1'},{empid:’3',name:’Employee2'},{empid:’4',name:’Employee3'}];}trackByEmpId(index:number,employee:any):string{return employee.empid;}}
<table><thead><tr><th>Employee ID</th><th>Employee Name</th><th>Index</th><th>First</th><th>Last</th><th>Even</th><th>Odd</th></tr></thead><tbody><tr *ngFor=”let employee of employees;trackBy:trackByEmpId;let i=index;let isFirst=first;let isLast=last;let isEven=even;let isOdd=odd”><td>{{employee.empid}}</td><td>{{employee.name}}</td><td>{{i}}</td><td>{{isFirst}}</td><td>{{isLast}}</td><td>{{isEven}}</td><td>{{isOdd}}</td></tr></tbody></table><br/><button (click)=”getEmployee()”>Refresh List</button>

--

--

--

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Called “Lifting State Up” In React

How NASA uses JavaScript

Canvas App : Create The Parent and Child Records in One Click !

Handle authentication using Passport.js in NODEJS

Writing unit test in React JS using Jest and Enzyme

Event Loop in JavaScript

How to use GitHub Actions and what they are? 🤔

Tools and Platforms for Data-Driven Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vaibhav Bhapkar

Vaibhav Bhapkar

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *

More from Medium

Angular : Dynamically resolving service based on text/enum value

Dynamically Add HTML elements in Angular 2–9(with a surprise gift link)

Working with Angular Local Storage