import { Component , OnInit , ChangeDetectionStrategy } from '@angular/core' ; import { Router , ActivatedRoute } from '@angular/router' ; import { Pizza } from '../../models/pizza.model' ; import { PizzasService } from '../../services/pizzas.service' ; import { Topping } from '../../models/topping.model' ; import { ToppingsService } from '../../services/toppings.service' ; @ Component ( { selector : 'product-item' , styleUrls : [ 'product-item.component.scss' ] , template : `
    <div 
      class="product-item">
      <pizza-form
        [pizza]="pizza"
        [toppings]="toppings"
        (selected)="onSelect($event)"
        (create)="onCreate($event)"
        (update)="onUpdate($event)"
        (remove)="onRemove($event)">
        <pizza-display
          [pizza]="visualise">
        </pizza-display>
      </pizza-form>
    </div>
  ` , } ) export class ProductItemComponent implements OnInit { pizza : Pizza ; visualise : Pizza ; toppings : Topping [ ] ; constructor ( private pizzaService , private toppingsService , private route , private router ) { } ngOnInit ( ) { this . pizzaService . getPizzas ( ) . subscribe ( pizzas => { const param = this . route . snapshot . params . id ; let pizza ; if ( param === 'new' ) { pizza = { } ; } else { pizza = pizzas . find ( pizza => pizza . id == parseInt ( param , 10 ) ) ; } this . pizza = pizza ; this . toppingsService . getToppings ( ) . subscribe ( toppings => { this . toppings = toppings ; this . onSelect ( toppings . map ( topping => topping . id ) ) ; } ) ; } ) ; } onSelect ( event ) { let toppings ; if ( this . toppings && this . toppings . length ) { toppings = event . map ( id => this . toppings . find ( topping => topping . id === id ) ) ; } else { toppings = this . pizza . toppings ; } this . visualise = { ... this . pizza , toppings } ; } onCreate ( event ) { this . pizzaService . createPizza ( event ) . subscribe ( pizza => { this . router . navigate ( [ `/products/${ pizza . id }` ] ) ; } ) ; } onUpdate ( event ) { this . pizzaService . updatePizza ( event ) . subscribe ( ( ) => { this . router . navigate ( [ `/products` ] ) ; } ) ; } onRemove ( event ) { const remove = window . confirm ( 'Are you sure?' ) ; if ( remove ) { this . pizzaService . removePizza ( event ) . subscribe ( ( ) => { this . router . navigate ( [ `/products` ] ) ; } ) ; } } }