import { Component } from '@angular/core'; import { map } from 'rxjs/operators'; import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; import { Observable } from 'rxjs'; import { AppService } from '../app.service'; @Component({ selector: 'app-dash', templateUrl: './dash.component.html', styleUrls: ['./dash.component.css'] }) export class DashComponent { /** Based on the screen size, switch from standard to one column per row */ cards=[]; cardsForHandset = []; cardsForWeb =[]; isHandset:boolean=false; isHandsetObserver:Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map(({ matches }) => { if (matches) { return true; } return false; }) ); constructor(private breakpointObserver: BreakpointObserver, public appService:AppService) {} ngOnInit(){ this.isHandsetObserver.subscribe(currentObservervalue=> { this.isHandset = currentObservervalue; this.loadCards(); }); this.appService.getDeals().subscribe( //here the subscribe is decrepted response =>{ this.cardsForHandset = response.Handsetcards; this.cardsForWeb = response.Webcards; this.loadCards(); }, Error=>{ alert('their is a problem in the server.please try again later') } ) } loadCards(){ this.cards =this.isHandset ? this.cardsForHandset:this.cardsForWeb; } getImage(imageName:string):string{ return 'url('+'http://localhost:3000/images'+imageName+'jpg'+')'; } }