Add print breakpoint

[epelc]

Feature Request

What is the desired behavior?

Add a standard breakpoint for the print media query.

What is the use-case or motivation for the desired behavior?

Many apps need to show things only when printing or saving to pdf.

<span fxHide fxShow.print>Printer specific info</span>
<span>Regular content</span>

Is there anything else we should know?

I know you can setup a custom breakpoint for this but I hope it is common enough to be included standard. For business apps people tend to print pages a lot and often need some extra info or some things hidden.

[epelc]

@CaerusKaru Thanks for triaging this! I'm open to submitting a pr since I really need decent print layout support. I've been fighting with getting print layouts to work/transition all day and found a few causes/problems.

Problem 1

Even when not using a print media query there are issues with not everything switching to new layouts after clicking print. I'm pretty sure this is because of the inline styles approach the components take. Basically I think this is happening

• You click print
• There is a matchMedia update for the print query
• Some of the directives update their inline styles
• Browser opens print dialog before above can finish
• Your layout is screwed up

I'm not sure how to fix this. Maybe you or @ThomasBurleson could share some insight? I remember discussing the inline style design way back when with him. I'm not sure if this was accounted for or if there is a workaround.

I feel bad posting this but here is a bad workaround/hack.

// Open a popup so we can control the width which will have the same layout as when we print
let w = window.open(window.location.toString(),"","width=960, height=1000")

// Wait 4 seconds for window to load content(ideally you'd hook angular and wait for zone to settle or use one of the load events)
setTimeout(()=>w.print(), 4000)

Problem 2

Besides that there is another lesser issue which I think can be addressed more easily and is basically my lack of knowledge about how this lib works so far.

Since the standard breakpoints no longer specify screen the print and regular breakpoints essentially fight each other in a last change wins contest. ie they become racy when opening the print dialog with something like <div fxFlex.gt-sm="50" fxFlex.print="100">.

extra

I've also noticed this weird behavior in chrome which is interesting. If your browser window is small when you click print your layouts do not have to "switch" and therefor you avoid bug problem 1.

It ends up cutting lots of sites off to a single page or if your original layout was multiple pages you end up with missing content/pages on the end.

[epelc]

Found a longstanding chrome issue about this https://bugs.chromium.org/p/chromium/issues/detail?id=571070

[epelc]

I've made some progress on a reasonable fix. The gist of it is that you add an onbeforeprint event listener to media-matcher for the print media query so that you can catch it, update the observable(synchronously so it's in the event handler), and boom the layout flow is all updated perfectly for the print preview page.

The reason you need to hook beforeprint instead of just using matchMedia is that matchMedia provides no way to do changes before the print dialog shows. Ie it is not blocking and doesn't allow for a callback. The sad issue here is that safari doesn't support onbeforeprint and instead recomends using matchMedia.

I've tested in chrome and it is possible to get this workaround working and reliable but I need to do some more work with problem 2 from above otherwise it requires explicit fx(Flex | **).print attributes on everything.

[epelc]

So we've been using the fix above with good luck but found another issue from the lack of synchronous matchMedia apis.

If you switch printers in the dialog(potentially other options can trigger as well) it will basically update the layout but other matchMedia's are likely to have fired and changed your layout breaking things again. I think a workaround could be discarding all matchMedia's until afterprint is triggered but it's not ideal. I think it would at least give you the control to specify a working print layout although it'd have to assume small paper sizes.

[CaerusKaru]

Here are the long awaited replies to this issue.

Problem 1: This can be easily solved by adding a matchMedia listener on the print event (ie matchMedia.addListener('print') or whatever the correct syntax is

Problem 2: As of beta 22 you can now specify priority for breakpoints, meaning you can specify that the print breakpoints always override the defaults.

That being said, as discussed here, we're going to implement this as a config, where turning on the config adds a print listener, and overrules the media activations during print (ie until print breakpoint deactivation). The config would allow a developer to specify a breakpoint to activate (which could include a custom breakpoint). Without objection, I'm going to fold this into #603 to track the work moving forward.

[epelc]

@CaerusKaru sounds good! FYI the print listener override solution above has been working pretty well in production for us.

Ideally the fix would incorporate ignoring media changes between the before and afterprint events as described in my last comment. But honestly it's been working well enough even without that.

I'll be sure to test any fixes on my particularly taxing page and follow #603

[epelc]

@CaerusKaru Just wanted to let you know that my beforeprint fix above + high priority setting on a print breakpoint are working with beta 22.

I've also updated my repo linked above with the same fix but on beta 22 and can confirm the beforeprint part is still required even with a high priority but that makes sense given the async nature described above.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}