/* Description:
 * A Product Item "Add to cart" Button Component was clicked... So the Event Emmiter is called passing the
 * event emmiter name (in this case "addToCart" is the event name).
 * The "EventEmmiterService" is responsible to hearing when the Event occurs and manage the emmiters triggered...
 * When the event is triggered, the cart component receive the emmited event, because it was subscribed
 * to the "addToCart" event (triggered on product-item.component.ts)
 */

 ////////////////////////////////////////////////////////////  product-item.component.html

 ...
  <button (click)=addToCart(product)>
    Add to cart
  </button>
 ...

/////////////////////////////////////////////////////////////  product-item.component.ts

import { Component, Input, Output } from '@angular/core';
import { EventEmitterService } from '../service/event-emitter.service';

@Component({
  selector: 'product-item',
  templateUrl: './product-item.component.html',
  styleUrls: ['./product-item.component.scss']
})
export class ProductItemComponent {

  @Input()
  public product: any

  addToCart(item) {
    EventEmitterService.get('addToCart').emit(item);
  }
}

/////////////////////////////////////////////////////////////////// cart.component.ts

import { Component, OnInit } from '@angular/core';
import { EventEmitterService } from '../service/event-emitter.service';

@Component({
  selector: 'app-cart-details',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {

  ngOnInit() {
    EventEmitterService.get('addToCart').subscribe(item=> console.log(item, `Item Added using Event Emmitter!!!`))
  }
}