Setup Angular 2 with Visual studio code editor.
- download VS from here :https://code.visualstudio.com/download
- Refer from here for angular 2 quick start :https://angular.io/guide/quickstart
Fetch data from json using angular2 js
File structure on code editor
Result:
1. Create dummy JSON file or use existing file :https://api.myjson.com/bins/1fgw4x
2. Create employee service class
and make a http call from emp service
[file name:employee.service.ts]
import { Injectable } from '@angular/core';
import { Http , Response} from '@angular/http';
// Import the map operator
import 'rxjs/add/operator/map';
@Injectable()
export class EmployeeService {
constructor(private _http: Http) { }
getEmployees() {
return this._http.get(this._url)
.map((response: Response) => response.json());
}
}
3. Create employee details
file[file name:employee-details.component.ts]
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';
@Component({
selector: 'app-employeedetail',
template: `<h2>Employee
Detail</h2>
<ul *ngFor="let employee of employees">
<li>{{employee.id}} | {{employee.name}} |
{{employee.gender}} </li>
</ul>`
})
export class EmployeeDetailComponent implements
OnInit {
employees: any = [];
constructor(private _employeeService: EmployeeService) { }
ngOnInit() {
this._employeeService.getEmployees()
.subscribe(resEmployeeData => this.employees = resEmployeeData )
}
}
4.Update
on app.module.ts file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { EmployeeDetailComponent
} from './employee-details.component';
@NgModule({
imports: [BrowserModule, HttpModule ],
declarations: [AppComponent, EmployeeDetailComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
5.Update code on app.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { EmployeeService } from './employee.service';
@Component({
selector: 'app-root1',
template: `<h1>Hello
Angular</h1>
<app-employeedetail></app-employeedetail>`,
providers : [EmployeeService]
})
export class AppComponent {}
6. HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp2</title>
<base href="/">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="icon" type="image/x-icon"
href="favicon.ico">
</head>
<body>
<app-root1></app-root1>
</body>
</html>
Optional:we can also replace template with template url in employee-details.component.ts .
<style>
table {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
border-collapse: collapse;
}
td {
border: 1px solid #369;
padding:5px;
}
th{
border: 1px solid #369;
padding:5px;
}
</style>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let employee of employees'>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
</tr>
<tr *ngIf="!employees || employees.length==0">
<td colspan="5">
No employees to display
</td>
</tr>
</tbody>
</table>
