import { Component , OnInit } from '@angular/core' ; import { MatSnackBar } from '@angular/material' ; import { ActivatedRoute } from '@angular/router' ; import { Product } from '@ngrx-workshop-app/api-interface' ; import * as fromProducts from '@ngrx-workshop-app/shared/state/products' ; import { ProductActions } from '@ngrx-workshop-app/shared/state/products' ; import { select , Store } from '@ngrx/store' ; import { map } from 'rxjs/operators' ; @ Component ( { selector : 'app-product-details' , templateUrl : './product-details.component.html' , styleUrls : [ './product-details.component.css' ] } ) export class ProductDetailsComponent implements OnInit { product$ = this . store . pipe ( select ( fromProducts . getSelectedProduct ) ) ; constructor ( private store , private route , private snack ) { } ngOnInit ( ) { this . route . paramMap . pipe ( map ( params => ProductActions . enterProductDetailsPage ( { id : params . get ( 'productId' ) } ) ) ) . subscribe ( this . store ) ; } addToCart ( product ) { this . snack . open ( 'Product added to cart successfully!' , null , { duration : 1000 } ) ; } }