techiediaries.com
Published in

techiediaries.com

Angular ngFor: Build an HTML Table with Angular 10 Example

Angular 10 is in beta version at the time of writing this post.

Angular 10 Example: Build a Table with ngFor

  • Step 1 — Getting Table Data
  • Step 2 — Displaying the Table Using ngFor

Step 1 — Getting Table Data Using an Angular 10 Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiServer = "http://server.com";
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
constructor(private httpClient: HttpClient) { }
get(): Observable<any[]> {
return this.httpClient.get<any[]>(this.apiServer + '/customers/');
}
}
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class App implements OnInit {
data = []; constructor(private apiService: ApiService) { } ngOnInit() { this.apiService.get().subscribe((data: any[])=>{
this.data = data;
})
}
}

Step 2 — Displaying the Table Using Angular 10 ngFor

<div>
<h1>NgFor Table Example</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Customer Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>
<button type="button" >Delete</button>
</td>
</tr>
</tbody>
</table>
</div>

--

--

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