Component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";

import { ProductService } from "../services/product.service";
import { CartService } from "../services/cart.service";

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  products: any;

  constructor(private productService: ProductService, private route: ActivatedRoute, private cartService: CartService) {

  }

  ngOnInit(): void {
    this.getProductById();
  }

  // tslint:disable-next-line:typedef
  getProductById() {
    const id = this.route.snapshot.paramMap.get('id');
    this.productService.getProduct(+id)
      .subscribe(data => this.products = data);
  }

  // tslint:disable-next-line:typedef
  addToCart(data){
    this.cartService.addItemToCart(data)
      .subscribe();
  }

}