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:
- 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.