In the below example, we are using user collection to display in table using Angular 2 *ngFor and Index for row click values like populate row data at the click of row add/edit/delete. All the detail as below examples,
Stayed Informed – Angular 2 documentations and examples
Stayed Informed – Angular 2 documentations and examples
Syntax –
<tr *ngFor="let user of userlist; let i = index" </tr>
home.component.html :-
<div class="row"> <div class="col-lg-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Angular 2 for loop typescript example - *ngFor</h5> </div> <div class="ibox-title"> <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" /> <strong>Resut- {{values}}</strong> </div> <div class="ibox-content"> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Name </th> <th>SiteUrl </th> <th>Actions </th> </tr> </thead> <tbody> <tr *ngFor="let user of userlist; let i = index" class="tbl-row-border"> <td>{{user.Id}}</td> <td>{{user.name}}</td> <td><a href="{{user.site}}" target="_blank">{{user.site}}</a></td> <td><a (click)="addUser(user)">A</a>|<a (click)="updateUser(user)">E</a>|<a (click)="deleteUser(user)">D</a></td> </tr> </tbody> </table> </div> </div> </div> </div> </div>
home.component.ts :-
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'home', templateUrl: './home.component.html', //styleUrls: ['./home.component.css'], styles: ['.tbl-row-border { border: 1px solid red;}'] }) export class HomeComponent { userlist: Users[]; constructor() { this.userlist = [{ Id: '1001', name: 'Anil SIngh', site: 'http://www.code-sample.com' }, { Id: '1002', name: 'Alok', site: 'http://www.code-view.com' }, { Id: '1003', name: 'Reena', site: 'http://www.code-sample.xyz' }, { Id: '1004', name: 'Dilip', site: 'http://www.codefari.com' }, ]; } values = ''; onKeyUp(event: any) { this.values = event.target.value; }; addUser(user) { alert(JSON.stringify(user)); }; updateUser(user) { alert(JSON.stringify(user)); }; deleteUser(user) { alert(JSON.stringify(user)); }; } export class Users { Id: String; name: String; site: String; }
app.module.ts :-
import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { UniversalModule } from 'angular2-universal'; import { AppComponent } from './components/app/app.component'; import { HomeComponent } from './components/home/home.component'; import { HeaderComponent } from './components/shared/header/header.component'; import { MenuComponent } from './components/menu/menu.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, HomeComponent, HeaderComponent, MenuComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: '**', redirectTo: 'home' } ]) ] }) export class AppModule { }
I hope you are enjoying
with this post! Please share with you friends. Thank you!!