How to Pass Data or values From One Component to another in Angular

Question

Good day Community, Please i am working on an ecommerce project and i would like to pass the quantity entered in my cart component to my checkout component, and when the value of the quantity changes, i would like it to change in the checkout component also. I have searched for solutions but couldnt find any. Someone please assist me. Thank you

This is my cart.component.ts

  trackByCartItems(index: number, item: any) {
    return item._id;
  }

  get cartItems() {
    return this.data.getCart();
  }


  get cartTotal() {
    let total = 0;
    this.cartItems.forEach((data, index) => {
      total += data['price'] * this.quantities[index];
    });
    return total;
  }

  removeProduct(index, product) {
    this.quantities.splice(index, 1);
    this.data.removeFromCart(product);
  }

and my cart.component.html

<div class="col-1 mt-5 mt-md-0 p-0 induc">
                <input type="number" class="form-control text-left boy"  [(ngModel)]="cart.quantities[i]">
              </div>
              

Thank you in advance

Answer 1

You have a few options, as detailed in this link.

You can use @input , if the relationship between the components is parent-child, or you can use a service.

I recommend reading up more on passing data between components, in this link.