import { ChangeDetectionStrategy , Component , Inject , Input , OnChanges , OnInit , SimpleChange } from '@angular/core' ; import { Observable , Subject , combineLatest } from 'rxjs' ; import { startWith } from 'rxjs/operators' ; import { API_BASE_URL } from '../../app.tokens' ; import { BidMessage , BidService , Product } from '../../shared/services' ; @ Component ( { selector : 'nga-product-detail' , styleUrls : [ './product-detail.component.scss' ] , templateUrl : './product-detail.component.html' , changeDetection : ChangeDetectionStrategy . OnPush } ) export class ProductDetailComponent implements OnInit , OnChanges { private readonly productChange$ = new Subject < Product > ( ) ; latestBids$ : Observable < number > ; @ Input ( ) product : Product ; constructor ( @ Inject ( API_BASE_URL ) private readonly baseUrl , private readonly bidService ) { } ngOnInit ( ) { this . latestBids$ = combineLatest ( this . productChange$ . pipe ( startWith ( this . product ) ) , this . bidService . priceUpdates$ . pipe ( startWith < BidMessage | null > ( null ) ) , ( product , bid ) => bid && bid . productId === product . id ? bid . price : product . price ) ; } ngOnChanges ( { product } ) { this . productChange$ . next ( product . currentValue ) ; } placeBid ( price ) { this . bidService . placeBid ( this . product . id , price ) ; } urlFor ( product ) { return `${ this . baseUrl }/${ product . imageUrl }` ; } }