import { Component , OnInit } from '@angular/core' ; import { Product } from '../product' ; import { ProductService } from '../product.service' ; import { Store } from '@ngrx/store' ; import { State , getShowProductCode , getCurrentProduct } from '../state/product.reducer' ; import * as ProductActions from '../state/product.actions' ; @ Component ( { selector : 'pm-product-list' , templateUrl : './product-list.component.html' , styleUrls : [ './product-list.component.css' ] } ) export class ProductListComponent implements OnInit { pageTitle = 'Products' ; errorMessage : string ; displayCode : boolean ; products : Product [ ] ; selectedProduct : Product | null ; constructor ( private store , private productService ) { } ngOnInit ( ) { this . store . select ( getCurrentProduct ) . subscribe ( currentProduct => this . selectedProduct = currentProduct ) ; this . productService . getProducts ( ) . subscribe ( { next : ( products ) => this . products = products , error : err => this . errorMessage = err } ) ; this . store . select ( getShowProductCode ) . subscribe ( showProductCode => this . displayCode = showProductCode ) ; } checkChanged ( ) { this . store . dispatch ( ProductActions . toggleProductCode ( ) ) ; } newProduct ( ) { this . store . dispatch ( ProductActions . initializeCurrentProduct ( ) ) ; } productSelected ( product ) { this . store . dispatch ( ProductActions . setCurrentProduct ( { product } ) ) ; } }