ngClass changes incorrectly when printing

Bug Report

On elements with ngClass, the media observers misbehave when printing. For example, if I have…

<p class="text-left" ngClass.lt-sm="text-center">Some text here</p>

…When I press Ctrl + P to print the page, then return, the text is centered (even though the screen size is still 1920px).

What is the expected behavior?

ngClass.lt-sm should be removed when printing is complete

What is the current behavior?

ngClass.lt-sm remains applied

What are the steps to reproduce?

• StackBlitz example

What is the use-case or motivation for changing an existing behavior?

The screen looks incorrect when printing completes

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I have tested in the latest Angular 8 and 9 releases with FlexLayout 8.0.0-beta.27 and 9.0.0-beta.29 respectively.

Is there anything else we should know?

[alex-vg]

My little dirty hack until this gets resolved…

export class CommonMaterialModule {
  lastValue;

  public constructor (
    m: MediaMarshaller,
  ) {
    // hack until resolve: https://github.com/angular/flex-layout/issues/1201
    // @ts-ignore
    m.subject.subscribe((x) => {
      // @ts-ignore
      if (m.activatedBreakpoints.filter((b) => b.alias === 'print').length === 0) {
        // @ts-ignore
        this.lastValue = [...m.activatedBreakpoints];
      } else {
        // @ts-ignore
        m.activatedBreakpoints = [...this.lastValue];
        // @ts-ignore
        m.hook.collectActivations = () => {};
        // @ts-ignore
        m.hook.deactivations = [...this.lastValue];
      }
    });
  }

}

CommonMaterialModule is my only module that imports (and re-exports) FlexLayoutModule.

[qliqdev]

I’m using "@angular/flex-layout": "^10.0.0-beta.32" and the problem is still exists in todays.