In this article, we will display a single product detail into a component. First of all, we need to move onto the read component section and create the following class properties.

productID: any; //Getting Product id from URL
productData: any; //Getting Product details

Next, inject CURD service, Router and ActivatedRoute using dependency injection on view component.

constructor(
private crudService: CrudService,
private router: Router,
private actRoute: ActivatedRoute) { }

create a method for load the product details here I give code block of that method

loadProductDetails(productID){
this.crudService.getProductDetails(productID).subscribe(product => {
this.productData = product;
});
}

I have accessed the CRUD service and got the product detail here. I have saved the product details into productData property.

this.productData = product;

Next, I want to get the product id from URL. So, I use the ActivatedRoute functionality here.

this. productID = this.actRoute.snapshot.params['id'];

this code got the product id from the URL.

then I have injected the loadProductDetails methods into the ngOnInit method.

ngOnInit() {
this. productID = this.actRoute.snapshot.params['id'];
this.loadProductDetails(this.productID);
}

here is the final code block of read.component.ts file.

import { Component, OnInit } from '@angular/core';
import {CrudService} from "../../services/crud.service";
import {Router, ActivatedRoute} from "@angular/router";

@Component({
selector: 'app-read',
templateUrl: './read.component.html',
styleUrls: ['./read.component.scss']
})
export class ReadComponent implements OnInit {
productID: any;
productData: any;
constructor(
private crudService: CrudService,
private router: Router,
private actRoute: ActivatedRoute) { }

ngOnInit() {
this. productID = this.actRoute.snapshot.params['id'];
this.loadProductDetails(this.productID);
}

loadProductDetails(productID){
this.crudService.getProductDetails(productID).subscribe(product => {
this.productData = product;
});
}

navigation(link){
this.router.navigate([link]);
}
}

Now, we will move onto the component template section and display the product details using string interpolation method.

<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 sol-sm-12">
<table class="table table-striped">
<tr>
<td>Name</td>
<td>{{productData['p_name']}}</td>
</tr>
<tr>
<td>Description</td>
<td>{{productData['p_description']}}</td>
</tr>
<tr>
<td>Price</td>
<td>{{productData['p_price']}}</td>
</tr>
</table>
<br>
<button class="btn btn-warning" (click)="navigation('')">Go Back</button>
</div>
</div>
</div>

in the next article, i will explain how to create a new product.