how can I display specific data on a secondary page in Angular? - json

Question

I have a mock json file that provides the list of products to be displayed on a Product page. I'd like to be able to select Product 1 and then only display Product 1 information on the Product Detail page but currently the Product Detail page just displays everything for all products and won't display the product name of the selected div. I am self-taught so not sure if I'm making the mistake in the typescript or json file or what. Can anyone point me to what I am overlooking to make this work?
The code:
product.component.html
<h4>Department 1</h4>
<div class="application-card" routerLink="/productDetails"
*ngFor="let product of products; let i = index">
{{ product.product_name }}
</div>
product.component.ts
import { Component, OnIt } from '#angular/core';
import {HttpClient} from "#angular/common/http";
#Component ({
selector: 'app-product',
templateURL: './product.component.html',
styleURLs: [./product.component.css']
})
export class ProductComponent implements OnInit {
products: any ""
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.allProducts();
}
allProducts() {
this.http.get<ProductList>(url: 'http://localhost:3000/productList).subscribe(next: data => {
this.products = data;
})
}
}
interface ProductList {
product_name: string;
product_detail_1: string;
product_detail_2: string;
product_detail_3: string;
}
productdetails.component.html
<h1>Product Details - {{ product.product_name }}</h1>
<p *ngFor="let product of products">
{{ product.product_details_1 }}
{{ product.product_details_2 }}
{{ product.product_details_3 }}
</p>
productdetails.component.ts
import { Component, OnIt } from '#angular/core';
import {HttpClient} from "#angular/common/http";
#Component ({
selector: 'app-productdetails',
templateURL: './productdetails.component.html',
styleURLs: [./productdetails.component.css']
})
export class ProductDetailsComponent implements OnInit {
products: any ""
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.allProducts();
}
allProducts() {
this.http.get<ProductList>(url: 'http://localhost:3000/productList).subscribe(next: data => {
this.products = data;
})
}
}
interface ProductList {
product_name: string;
product_detail_1: string;
product_detail_2: string;
product_detail_3: string;
}
products.json
{
"productList": [
{
"product_name": "Product 1",
"product_details_1": "1st detail about Product 1",
"product_details_2": "2nd detail about Product 1",
"product_details_3": "3rd detail about Product 1"
},
{
"product_name": "Product 2",
"product_details_1": "1st detail about Product 2",
"product_details_2": "2nd detail about Product 2",
"product_details_3": "3rd detail about Product 2"
},
{
"product_name": "Product 3",
"product_details_1": "1st detail about Product 3",
"product_details_2": "2nd detail about Product 3",
"product_details_3": "3rd detail about Product 3"
},

Answer 1

In your product.component.html file, you are looping through the products liste and getting each products index but your are doing nothing with it.
When you navigate to product details component, that particular component doesn’t know what to show.
You can fixe that by adding mock endpoint. For exemple: /productDetails/0 for thé first product in the array.
You can add the endpoint in your routing file. I suppose your’s is still the app.component-routing.ts?
If so, here how to going to proceed:
Change your productDetails route to something like this:
{ path: '/productDetails/:id,component: ProductDetailsComponent}
Inside your productdetails.component.ts, follow those steps.
Step 1: import ActivatedRoute
import { ActivatedRoute } from '#angular/router';
Step 2: Inject ActivatedRoute in constructor.
constructor(private activatedRoute: ActivatedRoute) { }
Step 3: Get id on a local variable in ngOnInit() or in the constructor{}
const productId = this.activatedRoute.snapshot.params['id'];
Filter you products by id and you done.