Resolved: I want to pass a an object to a child component. I did everything and nothing works. (ANGULAR)

Question:

This is the parent component: I passed all the data from the parentComponent to main-page Component.

import { Component, OnInit } from '@angular/core';
import { Product } from '../Model/Product';
import { ProductService } from '../ProductsService/product.service';

@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.css'],
})
export class ParentComponent implements OnInit {
    products: Product[] = [];
    cartList: Product[] = [];
    constructor(private productService: ProductService) {
        this.products = this.productService.getProducts();
    }

    ngOnInit(): void {}

    addCart(product: Product) {
        this.cartList.push(product);
    }
}

(TEMPLATE)

<app-main-page [products]="products" (addCart)="addCart($event)"></app-main-page>
<app-cart-list [cartList]="cartList"></app-cart-list>

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ProductService } from '../../ProductsService/product.service';
import { Product } from '../../Model/Product';

@Component({
    selector: 'app-main-page',
    templateUrl: './main-page.component.html',
    styleUrls: ['./main-page.component.css'],
})
export class MainPageComponent {
    @Input() products: Product[] = [];
    @Output() addCart: EventEmitter<Product> = new EventEmitter();
    constructor(private productService: ProductService) {
        this.products = this.productService.getProducts();
    }

    addToCartList(product: Product) {
        this.addCart.emit(product);
        console.log(product);
    }
}

(TEMPLATE) As you can notice that there’s a click button in which I emitted this method to the parent so I can pass its value to another child component.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
    </head>
    <body>
        <section>
            <div class="products">
                <ul *ngFor="let product of products">
                    <img decoding="async" src="{{ product.img }}" alt="store pictures" />
                    <li>{{ product.name }}</li>
                    <li>{{ product.type }}</li>
                    <li>{{ product.available }}</li>
                    <li>{{ product.price }}</li>
                    <button (click)="addToCartList(product)">Add to Cart</button>
                </ul>
            </div>
        </section>
    
</body>
</html>

import { Component, Input, OnInit } from '@angular/core';
import { Product } from 'src/app/Model/Product';
@Component({
    selector: 'app-cart-list',
    templateUrl: './cart-list.component.html',
    styleUrls: ['./cart-list.component.css'],
})
export class CartListComponent implements OnInit {
    constructor() {
        console.log(this.cartList);
    }
    @Input() cartList: Product[] = [];
    ngOnInit(): void {}
}

I cannot use any value in cartList, why?

Answer:

Input variables, event emitters, and RxJS just complicate the problem here. All you need is a simple Angular service.
Here is a stackblitz: https://stackblitz.com/edit/angular-ivy-a6ub1h?file=src/app/app.component.html
Your parent component doesn’t need any typescript, all it needs to do is instantiate the other components via html:
Parent Component

<app-main-page></app-main-page>
<app-cart-list></app-cart-list>

I’ll make a product service to simulate your app, although I’m not sure exactly what your service looks like. Products will just have a name for simplicity.
Product Service

export type Product = {
  name: string;
};

@Injectable({ providedIn: 'root' })
export class ProductService {
  getProducts(): Product[] {
    return [
      { name: 'product1' },
      { name: 'product2' },
      { name: 'product3' },
      { name: 'product4' },
      { name: 'product5' },
      { name: 'product6' },
      { name: 'product7' },
      { name: 'product8' },
    ];
  }
}

And I’ll make a service to hold the cart list items, we’ll have add and delete functionality.
Cart Service

@Injectable({ providedIn: 'root' })
export class CartService {
  cartList: Product[] = [];

  addToCart(product: Product) {
    this.cartList.push(product);
  }

  deleteFromCart(index: number) {
    this.cartList.splice(index, 1);
  }
}

Main page just gets the products and can add them to the cart.
Main Page

export class MainPageComponent implements OnInit {
  products: Product[] = [];

  constructor(
    private prodService: ProductService,
    private cartService: CartService
  ) {}

  ngOnInit() {
    this.products = this.prodService.getProducts();
  }

  addToCart(product: Product) {
    this.cartService.addToCart(product);
  }
}

<h1>Main Page</h1>
<ng-container *ngFor="let product of products">
  <span>{{ product.name }} </span>
  <button (click)="addToCart(product)">Add to Cart</button>
  <br />
</ng-container>

Cart component shows the cart items and can delete them
Cart List

export class CartListComponent {
  constructor(private cartService: CartService) {}

  get cartList() {
    return this.cartService.cartList;
  }

  delete(index: number) {
    this.cartService.deleteFromCart(index);
  }
}

<h1>Cart</h1>
<ng-container *ngFor="let product of cartList; index as i">
  <span>{{ product.name }} </span>
  <button (click)="delete(i)">Delete</button>
  <br />
</ng-container>

If you have better answer, please add a comment about this, thank you!

Resolved: I want to pass a an object to a child component. I did everything and nothing works. (ANGULAR)

Resolved: linq2db throws exception when filtering by nested collection

Resolved: Table data is coming as empty in React

Resolved: In a Pinescript v5 Strategy why is my bool not working?

Leave A Reply