I am using angular 15. Displaying products in a page where every product have a action button after click on it a popup(bootstrap model) appears which has form in form product details appear and update and delete buttons is there but when I click on action it will only geting first product details for every product.How can I get specific product details on action button click. I am using json server
Product component
{{items.product}}
Price {{items.price}}
<button type=”button” class=”btn btn-primary” data-bs-toggle=”modal”
data-bs-target=”#exampleModal”
Action
<1– Modal –>
aria-labelledby=”exampleModalLabel”
aria-hidden=”true”>
Modal titleh1>
<button type=”button” class=”btn-close” data-bs-dismiss=”modal”
| aria-label=”Close”>
Name of the Product
input type=”text” class=”form-control” name=”product”
| value=”{{items.id}}”>
Price of the Product
<input type=”text” class=”form-control” name=”price” value=”
{{items.price}}”>
<button type=”button” class=”btn btn-secondary”
data-bs-dismiss=”modal”>Close
<button class=”btn btn-danger” (click)=”deleteProduct(items.id)” data-bs-dismiss=”modal”>Delete
<button type=”button” class=”btn btn-primary”
data-bs-dismiss=”modal”>Update
Ts file
export class ProductHomeComponent implements OnInit {
productList: any
constructor(private product: ProductService, private router: Router) { }
ngOnInit(): void { I
this.product.getProduct().subscribe((res) => {
if (res) {
this.productList = res
} else {
console.log(“product”, res);
}
})
}
}
else {
deleteProduct(id: any) {
console.log(“id”,id)
this.product.deleteProduct(id).subscribe((res) => {
if (res) {
console.log(“deleted successfully”)
window.location.reload();
console.log(“not delete, check again”)
}
})
Service file
export class ProductService {
url=’http://localhost:3000/products’
constructor(private http: HttpClient) {}
addProduct(data: any) {
return this.http.post(this.url, data)
}
getProduct() {
return this.http.get(this.url)
deleteProduct(id: any) {
return this.http.delete(“http://localhost:3000/products/${id}”)
}
}