Unable to pass data between two components in Angular 14

Question

I'm very new to Angular and I'm having difficulty passing data from a parent to child component. I have a product listing page where you click on a product and it routes to the product detail page. But I can't seem to get the product details to show.

Component 1: Contains all the product data. Component 2: Routes to a new page where said product data is displayed.

product list (parent) component file:

import { Component, OnDestroy, OnInit } from "@angular/core";
import { Subscription } from "rxjs";
import { IProduct } from "./product";
import { ProductService } from "./product.service";

@Component({
    templateUrl: './product-list.component.html',
    styleUrls: ['./product-list.component.css']
})

export class ProductListComponent implements OnInit, OnDestroy {
    pageTitle = 'Anthony\'s Product List';
    imageWidth = 50;
    imageMargin = 2;
    showImage: boolean = true;
    errorMessage: string = '';
    sub!: Subscription;
    
    private _listFilter: string = '';
    get listFilter(): string {
       return this._listFilter 
    }
    set listFilter(value: string) {
        this._listFilter = value;
        console.log('In setter:', value);
        this.filteredProducts = this.performFilter(value);
    }

    filteredProducts: IProduct[] = [];
    products: IProduct[] = [];

    //defining the injector so it can be used in this class
        constructor(private productService: ProductService) {}

    //this is a method

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().includes(filterBy));
    }
    
    toggleImage(): void {
        this.showImage = !this.showImage;
    }
    //this lifecycle hook retrives the data we need
    ngOnInit(): void {
        this.productService.getProducts().subscribe({
            next: products => {
                this.products = products;
                this.filteredProducts = this.products;
            },
            error: err => this.errorMessage = err
        });
        
    }

    ngOnDestroy(): void {
        //this.sub.unsubscribe();
    }

    onRatingClicked(message: string): void {
        this.pageTitle = 'Product List: ' + message;
    }
    
}

Parent component HTML:


    
        {{pageTitle}}
    
    
        
            Filter by:
            
                
            
        
        
            
                Filtered by: {{listFilter}} 
            
        
        
            
                
                    
                        
                            
                        
                        Product
                        Code
                        Available
                        Price
                        5 Star Rating
                    
                
                
                    
                        
                            
                        
                        
                            
                            {{product.productName}}
                            
                           
                        {{product.productCode | convertToSpaces:'-' }}
                        {{product.releaseDate}}
                        {{product.price | currency:'AUD'}}

Product detail component file:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { IProduct } from '../product/product';

@Component({
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit  {
  product: IProduct | undefined;
  pageTitle: any = 'Product Detail';

  constructor(private route:ActivatedRoute, 
              private router: Router) { }
  
              ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.pageTitle += `: ${id}`;
  }
    
    onBack(): void {
      this.router.navigate(['/products']);
    }

  }

Child component HTML file:


    
        {{pageTitle + ': ' + product?.productName}}
    
    

    
        Code:
        {{product?.productCode}}

Json file with a snippet of product data:

[
    {
      "productId": 1,
      "productName": "Leaf Rake",
      "productCode": "GDN-0011",
      "releaseDate": "March 19, 2019",
      "description": "Leaf rake with 48-inch wooden handle.",
      "price": 19.95,
      "starRating": 3.2,
      "imageUrl": "assets/images/leaf_rake.png"
    },
    {
      "productId": 2,
      "productName": "Garden Cart",
      "productCode": "GDN-0023",
      "releaseDate": "March 18, 2019",
      "description": "15 gallon capacity rolling garden cart",
      "price": 32.99,
      "starRating": 4.2,
      "imageUrl": "assets/images/garden_cart.png"
    },

Produce service TS file:

import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { catchError, Observable, tap, throwError } from "rxjs";

import { IProduct } from "./product";

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productUrl = 'api/products/products.json';

  constructor(private http: HttpClient) {}

  getProducts(): Observable {
    return this.http.get(this.productUrl).pipe(
    tap(data => console.log('All: ', JSON.stringify(data))),
    catchError(this.handleError)
    );
  }

I've just started learning, so please ignore any mistakes.

Unable to pass data between two components in Angular 14

Answers (1)

Related Questions