product-list.component.html

<app-product [pData]="pList" (addItem)="saveToCart($event)"></app-product>

product.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Product } from 'src/app/models/product';

@Component({
  selector: 'app-product',
  template: `
  <div>
    <img [src]="pData.productImage" />
    <h3>{{ pData.productName }}</h3>
    <h4>{{ pData.productPrice }}</h4>
    <button (click)="addToCart()">Add to Cart</button>
</div>
  `,
  styleUrls: ['./product.component.css']
})
export class ProductComponent {

  @Input() pData: Product = null;
  @Output() addItem=new EventEmitter();
  
  addToCart(){
    this.addItem.emit(this.pData);
  }

}