I checked most of these answers. then decided to check out Angular documentation on Layout.
Angular has its own Observer for detecting different sizes and it is easy to implement into the component or a Service.
a simpl example would be:
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';@Component({...})class MyComponent { constructor(breakpointObserver: BreakpointObserver) { breakpointObserver.observe([ Breakpoints.HandsetLandscape, Breakpoints.HandsetPortrait ]).subscribe(result => { if (result.matches) { this.activateHandsetLayout(); } }); }}hope it helps