В чем преимущество использования Angular Material BreakpointObserver API по сравнению с простым Media Query?

export class BreakpointService {

    constructor() {
        this.onLoad()
        this.onResize()
    }

    private readonly breakpoints = {
        xs: 0,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200
    }

    private currentWidthSub$ = new BehaviorSubject<number>(null)
    public currentWidth$ = this.currentWidthSub$.asObservable()

    isMobile$ = this.currentWidth$.pipe(map(x => x < this.breakpoints.md), distinctUntilChanged())

    currentBreakpoint$ = this.currentWidthSub$.pipe(
        filter(width => width != null),
        map(width => {
            return Object.keys(this.breakpoints).map((key) => {
                return {
                    key: key,
                    value: this.breakpoints[key] - 1
                }
            }).reverse().find(x => x.value < width).key
        }),
        distinctUntilChanged()
    )

    private onResize = () => {
        fromEvent(window, 'resize').subscribe(resize => {
            this.currentWidthSub$.next(resize.currentTarget["innerWidth"])
        })
    }

    private onLoad = () => {
        fromEvent(window, 'load').subscribe(load => {
            this.currentWidthSub$.next(load.currentTarget["innerWidth"])
        })

    }  
}