<style>
table, th, td
{
margin: 10px 0;
border: solid 1px #333;
padding: 2px 4px;
font: 15px Verdana;
}
th {
font-weight:bold;
}
</style>
App.component.html
<h1>
{{ title }}!
</h1>
<table *ngIf="arrEmps">
<tr>
<th>ID</th>
<th>Emp Name</th>
<th>City</th>
<th>State</th>
</tr>
<tr *ngFor="let Emp of
arrEmps">
<td>{{Emp.ID}}</td>
<td>{{Emp.Name}}</td>
<td>{{Emp.City}}</td>
<td>{{Emp.State}}</td>
</tr>
</table>
App.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Employee Table Example';
constructor (private httpService: HttpClient) {
}
arrEmps: string [];
ngOnInit () {
this.httpService.get('./assets/Cities.json').subscribe(
data => {
this.arrEmps = data as string []; // FILL THE ARRAY WITH
DATA.
// console.log(this.arrEmps[1]);
},
(err:
HttpErrorResponse) => {
console.log
(err.message);
}
);
}
}
Cities.json
[{
"ID": "001",
"Name": "Emma",
"City": "New York",
"State": "New York"
},
{
"ID": "002",
"Name": "Liam",
"City": "Los Angeles",
"State": "California"
},
{
"ID": "003",
"Name": "William",
"City": "Chicago",
"State": "Illinois"
},
{
"ID": "004",
"Name": "James",
"City": "Houston",
"State": "Texas"
},
{
"ID": "005",
"Name": "Isabella",
"City": "Philadelphia",
"State": "Pennsylvania"
},
{
"ID": "006",
"Name": "Ava",
"City": "Phoenix",
"State": "Arizona"
},
{
"ID": "007",
"Name": "William",
"City": "San Diego",
"State": "Texas"
}]
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
No comments:
Post a Comment