import { ChangeDetectionStrategy , Component , Inject , Input } from '@angular/core' ; import { ObservableMedia } from '@angular/flex-layout' ; import { Observable } from 'rxjs' ; import { map , startWith } from 'rxjs/operators' ; import { API_BASE_URL } from '../../app.tokens' ; import { Product } from '../../shared/services' ; @ Component ( { selector : 'nga-product-grid' , styleUrls : [ './product-grid.component.scss' ] , templateUrl : './product-grid.component.html' , changeDetection : ChangeDetectionStrategy . OnPush } ) export class ProductGridComponent { @ Input ( ) products : Product [ ] = [ ] ; readonly columns$ : Observable < number > ; readonly breakpointsToColumnsNumber = new Map ( [ [ 'xs' , 1 ] , [ 'sm' , 2 ] , [ 'md' , 3 ] , [ 'lg' , 4 ] , [ 'xl' , 5 ] , ] ) ; constructor ( @ Inject ( API_BASE_URL ) private readonly baseUrl , private readonly media ) { this . columns$ = this . media . asObservable ( ) . pipe ( map ( mc => < number > this . breakpointsToColumnsNumber . get ( mc . mqAlias ) ) , startWith ( 3 ) ) ; } urlFor ( product ) { return `${ this . baseUrl }/${ product . imageUrl }` ; } }