5

I have created an angular application using angular material and angular flex layout. The problem with the app is that whenever I press Ctrl + P in chrome, all of the menus in the navbar gets disappeared and the menu button which should appear only in mobile devices gets appeared and above all the whole app become unusable. I have to refresh the browser to make the application reusable. I have read from the github issue pages of the angular flex layout that the UI thread gets interrupted when the print dialog appears, hence the issue. Is there any workaround to this issue.

I have created a git repo for the same 'angular-responsive-navbar' so that anybody can reproduce the issue.

kaushik
  • 2,308
  • 6
  • 35
  • 50

1 Answers1

6

There is some issue with restoring the active break points in MediaMarshaller once the print dialog is closed. You can use below code for temp fix.

export class CommonMaterialModule {
  lastValue;

  public constructor (
        m: MediaMarshaller,
      ) {        // @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];
          }
        });
      }
    }

Please refer this link for detailed explanation.

Vishnu Tejaswini
  • 61
  • 1
  • 5