import { map , startWith } from 'rxjs/operators' ; import { Component , Input } from '@angular/core' ; import { ObservableMedia } from '@angular/flex-layout' ; import { Observable } from 'rxjs' ; import { Product } from '../../shared/services' ; @ Component ( { selector : 'nga-product-suggestion' , styleUrls : [ './product-suggestion.component.scss' ] , templateUrl : './product-suggestion.component.html' } ) export class ProductSuggestionComponent { @ Input ( ) products : Product [ ] ; readonly columns$ : Observable < number > ; readonly breakpointsToColumnsNumber = new Map ( [ [ 'xs' , 2 ] , [ 'sm' , 3 ] , [ 'md' , 5 ] , [ 'lg' , 2 ] , [ 'xl' , 3 ] , ] ) ; constructor ( private media ) { this . columns$ = this . media . asObservable ( ) . pipe ( map ( mc => < number > this . breakpointsToColumnsNumber . get ( mc . mqAlias ) ) , startWith ( 3 ) ) ; } }