import { BreakpointObserver, BreakpointState } from "@angular/cdk/layout"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs"; /** * @ref https://stackoverflow.com/a/68947419 */ @Injectable({ providedIn: "root" }) export class ResponsiveService { constructor(private observer: BreakpointObserver) {} isBelowSm(): Observable<BreakpointState> { return this.observer.observe(["(max-width: 575px)"]); } isBelowMd(): Observable<BreakpointState> { return this.observer.observe(["(max-width: 767px)"]); } isBelowLg(): Observable<BreakpointState> { return this.observer.observe(["(max-width: 991px)"]); } isBelowXl(): Observable<BreakpointState> { return this.observer.observe(["(max-width: 1199px)"]); } }