Angular Part 4: Create Single Product Details Page angular app| Create Ecommerce Angular project

create a page with single product desplay the product

Let’s Create The Product Details Page

Product Details Page

Here’s an example of how you can create a single product page in an Angular app:

1. Create a new component for the single product page, let’s call it product-page.

single-product.component.html

In the product-page component’s template (product-page.component.html), you can display the product’s details using the product object.

<section class="container border border-info">
<!-- <h1>single-product</h1> -->
<div class="m-3  ">
<ng-container  *ngFor="let product of product_list">
<div class="row" *ngIf="product !==undefined">
<div class="col-5 vertical-center">
<img src={{product.image_url}} alt={{product.title}} width="100%" height="auto">
</div>
<div class="col-6 vertical-center">
<div class="">
<h1>{{product.title | slice:0:100}}</h1>
<h4>Price : {{product.price}}</h4>
<h4>Rating : {{product.rating}}</h4>
<h4>Review : {{product.review}}</h4>
<button (click)="buyThis(product.link)" class="btn btn-warning  px-5 shadow-lg rounded" ><strong>Buy Now</strong></button>
</div>
</div>
<div class="row my-2">
 
  <ul class=" nav nav-pills justify-content-center " id="pills-tab" role="tablist">
    <li class="nav-item mx-2 shadow-lg bg-white rounded" role="presentation">
      <button class="active btn btn-outline-warning" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Description</button>
    </li>
    <li class="nav-item mx-2 shadow-lg bg-white rounded" role="presentation">
      <button class="btn btn-outline-warning" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Write Review</button>
    </li>
    
  </ul>
</div>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active " id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      <h3 class="text-center text-uppercase border border-warning">Description</h3>
      <blockquote class="blockquote text-break">{{product.description}}</blockquote>
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      <h3 class="text-center text-uppercase border border-warning">Reviews</h3>  
    </div>
    
  </div>

  
  
</div>
</ng-container>
</div>
</section>
<br/>
<br/>

single-product.component.ts

In the product-page component’s class (product-page.component.ts), you can retrieve the product’s ID from the route parameters and use it to make an API call to retrieve the product’s details. You can do this by injecting the ActivatedRoute in the constructor and use the snapshot.paramMap to extract the ID.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductModel } from '../models/product.model';
import { ProductService } from '../services/product.service';

@Component({
  selector: 'app-single-product',
  templateUrl: './single-product.component.html',
  styleUrls: ['./single-product.component.css'],
  providers:[ProductService]
})
export class SingleProductComponent implements OnInit {

  product_list:ProductModel[]=[];
  constructor(private http_api:ProductService,private route:ActivatedRoute) { }

  ngOnInit(): void {
    let id:number;
  this.route.params.subscribe(params=>id=params['id'])
  this.http_api.getSingleProduct(id).subscribe((data)=>this.product_list=data['result'])
console.log(this.product_list);
  
}
 buyThis(url:any){
  window.open(url)
 }


}

In your product.service.ts file you should create a new function getProduct(id: string) that will handle the API call to retrieve the product by id.

call the service

Finally, in your app-routing.module.ts file, add a new route for the product-page component and include the parameter for the product’s ID.

This is a basic example and you can customize the implementation as per your needs. You can add different features like adding the product to a cart, displaying related products, etc.