Communicating Between two Components in Angular Using @Output and EventEmitter

Question

Good day, Please i am new to Angular and i am working on an e-commerce cart and checkout page using Angular 9, I would like to pass/communicate the quantity of each product entered in the input tag of the Cart Component to the Checkout page. I have tried other method but Im stuck and the @Output method doesnt seem to work. Below are my codes Cart.Component.ts

 import { Component, OnInit,EventEmitter, Output,Input} from '@angular/core';
 @Input() quantities = [];
@Output() quantityChange = new EventEmitter();

 changeQuantity(quantities){
  this.quantityChange.emit(quantities);
 }

checkout() {
   
    this.quantityChange.emit ();
}
    

Checkout.component.html

Qty: {{quantities}}
    <app-cart (quantityChange)="ChangeQuantity($event)"></app-cart>

Thank you in advance

Answer 1

In Cart.Component.ts :

checkout() {
    this.quantityChange.emit (quantities);
}

In Checkout.component.html

Qty: {{quantities}}
    <app-cart (quantityChange)="ChangeQuantity($event)"></app-cart>

In Checkout.component.ts

quantities = ''; // init above    
changeQuantity(e) {
      this.quantities = e
     }