/* view_id_to_display_component.html */
<html>
<body>
<table class="table">
<thead class="table-dark">
<tr>
<th>id</th>
<th>Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Operation</th>
</tr>
</thead>
<tr *ngFor="let emp of empDetail" >
<td>{{emp.id}}</td>
<td>{{emp.name}}</td>
<td>{{emp.email}}</td>
<td>{{emp.phone}}</td>
</tr>
</table>
</body>
</html>
/* Display the details of id
passing the routing parameters to the http get request
it wasn't show the particular details of the ID instead it shows all the fields in the api
*/
/* Display the details of id
passing the routing parameters to the http get request
it wasn't show the particular details of the ID instead it shows all the fields in the api
*/
/*read.service.ts*/
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';
import {HttpClient, HttpParams} from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { detail } from '../detail.ts/emp_detail';
@Injectable({
providedIn: 'root'
})
export class ReadServiceService {
baseURL="http://192.168.0.114:9002/api/employee"
bu="https://jsonplaceholder.typicode.com/posts"
constructor(private httpclient:HttpClient,
private route:ActivatedRoute) { }
getcomment():Observable {
return this.httpclient.get(this.bu);
}
getSingle(id:any):Observable{
let params = new HttpParams()
.set('id', id)
return this.httpclient.get(this.bu , {params:params});
}
}
/*view_id_to_display.component.ts*/
import { Component, OnInit } from '@angular/core';
import { detail } from '../detail.ts/emp_detail';
import { ReadServiceService } from '../service/read-service.service';
import {ActivatedRoute,Params} from '@angular/router';
import {HttpClient,HttpParams} from '@angular/common/http';
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
empDetail:detail[];
constructor(private route: ActivatedRoute,private read:ReadServiceService) {
}
ngOnInit() {
this.read.getcomment()
.subscribe(res =>{
this.empDetail = res.data;
});
}