Add the media query alias to the body tag with angular flex-layout

ng-media-query-body-class.ts

import { Component, OnInit, OnDestroy, Inject, Renderer2 } from '@angular/core';
import { Subscription } from 'rxjs';
import { MediaObserver } from '@angular/flex-layout';
import { DOCUMENT } from '@angular/common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
    mediaObserverSubscription: Subscription;
    currentMediaQueryAlias: string;
    
    constructor(
        @Inject(DOCUMENT) private document: Document,
        private renderer: Renderer2,
        private mediaObserver: MediaObserver,
    ) {}

    ngOnInit(): void {
        this.mediaObserver.media$.subscribe(mediaChange => {
            this.renderer.removeClass(this.document.body, this.currentMediaQueryAlias);
            this.currentMediaQueryAlias = mediaChange.mqAlias;
            this.renderer.addClass(this.document.body, this.currentMediaQueryAlias);
        });
    }

    ngOnDestroy(): void {
        if (this.mediaObserverSubscription)
            this.mediaObserverSubscription.unsubscribe();
    }
}