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.

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

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

Patch release 13.0.0-beta.37 cut. Please let us know it you have any further issues.

Ok quick followup here; my solution worked about half-way. The other half involved incorporating much of what @alex-vg’s solution put forth. They were correct that our accumulation routine was not working, and that a better method is to just capture the breakpoints before the event and restore them after. Unfortunately, this went against the intention of the accumulator in the first place (we essentially had that approach to begin with); we support beforeprint and afterprint events as well for browsers that have quirky print behaviors. Therefore, in #1380, I have adapted this approach so that it works in both instances. This should close out the issue, and in testing with the docs site I think we’re in the clear.

First of all, thank you so much to @alex-vg for the patch that helped users while we tracked this issue. Contributions like this are invaluable and greatly appreciated by the entire team.

Now, the issue at hand, it turns out the root cause was a lot simpler than I thought it was going to be, and was just an issue of array reference assignment. In essence, we were restoring breakpoints correctly, but then immediately unassigning them. This led to the outcome all of you were seeing during print, which was obviously less than optimal. We’ve patched this in #1379, which has landed in the nightly release for those who’d like to try it out and report back. If not, it’ll be in the next minor/major release.

Thank you all for your patience, and again, thank you @alex-vg.

Thank you very much @alex-vg !!!

@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;
      }
     }

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.

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

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

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

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.

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!

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