Information product.model.ts
id?: string;
name: string;
price: number;
sale_price: number;
description: string;
tech_sheet: string;
imageUrls: string[];
category: string;
createdAt: Date;
}
Initialize file product.service.ts
The latest function
getDetailProduct(productId: string)import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { Product } from 'src/app/models/product.model';
@Injectable({
providedIn: 'root'
})
export class ProductsService {
productCollection: AngularFirestoreCollection<Product>;
constructor(private dbstore: AngularFirestore) {
this.productCollection = this.dbstore.collection('products', (ref) =>
ref.orderBy('name', 'desc')
);
}
addProduct = (product: Product) => this.productCollection.add(product);
getProducts() {
return this.dbstore.collection('products').snapshotChanges();
}
getDetailProduct(productId: string): Observable<Product | undefined> {
return this.productCollection.doc(productId).valueChanges();
}
}
Invoke the function in the product.service.ts service to access the detailed product page with the ID.
goToDetailsProduct(productId?: string): void {
this.router.navigate(['product-details', productId]);
console.log(productId);
}
When clicking on a product, the link containing its ID should be included in the URL.
<div class="card card-shopping" *ngFor="let product of products" (click)="goToDetailsProduct(product.id)">
Issue: How can we retrieve all product data and display it on the page details-product.component.ts?
import {Location} from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { Product } from 'src/app/models/product.model';
import { ProductsService } from '../../shared/services/products.service'
@Component({
selector: 'app-details-product',
templateUrl: './details-product.component.html',
styleUrls: ['./details-product.component.css']
})
export class DetailsProductComponent implements OnInit {
productIdRoute?: string;
product?: Observable<Product | undefined>;
constructor(
private location: Location,
private route: ActivatedRoute,
private productService: ProductsService
) {
const routeParams = this.route.snapshot.paramMap;
this.productIdRoute = String(routeParams.get('productId'))
this.product = this.productService.getDetailProduct(this.productIdRoute);
}
ngOnInit(): void {
}
// goBack = () => this.location.back();
}