Flex-layout: ngClass changes incorrectly when printing

[JustACodeMonkey]

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]

I think the activatedBreakpoints are not properly restored in stopPrinting()

edit: yes, I can confirm, activatedBreakpoints are not restored correctly. If you just dump=[...target.activatedBreakpoints] in startPrinting() and set target.activatedBreakpoints = dump in stopPrinting() it works in my case. This also affects other breakpoint styles like fxFlex.lg-md etc.

this was my case:

target.activatedBreakpoints.map((x)=>x.alias) the correct array in startPrinting():
["xl", "gt-lg", "gt-md", "gt-sm", "gt-xs"]

this.deactivations.map((x)=>x.alias) the faulty array in stopPrinting():
["xs", "lt-sm", "lt-md", "lt-lg", "lt-xl", "xl", "gt-lg", "gt-md", "gt-sm", "gt-xs"]

[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.

[PsyStorm25]

@alex-vg thank you, your temporary fix works for me.
Seems this bug is a duplicate of #1228 (or the opposite).

[lambertwen]

@alex-vg much appreciated! this fix did the trick.

[oneclickwebstudio]

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

[jnfaerch]

Just chiming in as this bug is still present. Thx to @alex-vg for the temporary fix 👍

[FloNeu]

Hello! Also ran into this bug - and was searching for hours - any reason this isn't resolved yet - the hack, did solf the issue for now!

[tyeety]

Same bug here. I'm using ^11.0.0-beta.33 facing this error. even if I use *ngIf to remove elements before calling window.print, all elements use fxFlex.sm value.

[FloNeu]

@tyeety use the fix from @alex-vg - it restores the correct breakpoints after the print-window closes

[tyeety]

Yes, Thank you @FloNeu and many thanks to @alex-vg for the solution. I imported this module in my root module and problem fixed for the entire solution. Hope to see that the problem is fixed in the very next version

[borox2k]

@alex-vg thanks, your workaround still works 2021 angular 11
gracias

[Amirroracle]

The issue with @alex-vg 's solution is that it restores the breakpoint but I found that the print preview is now broken instead.

[alex-vg]

The issue with @alex-vg 's solution is that it restores the breakpoint but I found that the print preview is now broken instead.

Which breakpoints are active when printing?
In case you want to set the print breakpoints: https://github.com/angular/flex-layout/blob/master/docs/documentation/BreakPoints.md

The workaround just restores breakpoints, it does not write print breakpoints on print-begin.

[Amirroracle]

@alex-vg

So I found out what the issue was, and for anyone else also running into the same issue where the print preview is malformed, it is due to centering using fxLayoutAlign. Basically instead of using fxLayoutAlign="center center" I would replace it with this in your component style:

    .body-print {
      place-content: stretch center;
    }
    @media print {
      .body-print {
        place-content: stretch start;
      }
     }

[rdanielst]

Thank you very much @alex-vg !!!!!