How to properly set print orientation in Angular application?

Question

I need to create a printing service, that can be called from different components throughout my application. The service method accepts two parameters, the component that needs to be compiled and printed, and the printing orientation (Portrait or Landscape).

Everything works fine, except the orientation. Either it is not set, or it sticks with the secondly applied orientation. What I mean by secondly applied orientation is, I have two buttons for testing purposes. Each button calls different component and sets different orientation. If I click the buttons in the following order: Portrait orientation and then Landscape orientation, no matter what I press after that, the page is printed in Landscape, and vice versa.

So far, I have tried the following:

• defined two different div elements conditionally generated (with ngIf directive). Each div contains <style></style> elements with appropriate page orientations. The style elements are not rendering, hence orientation is not changed

• page orientation is defined within the component's style/stuleUrls metadata. This produces the problem with the secondly applied orientation as described above

• add styling to the dynamically created components with ComponentFactoryResolver. The styling to the page is not applied

The component is dynamically generated using the ComponentFactoryResolver. For simplicity, I won't post that code. I will post it if it's needed.

This html is added in the app.component.html:

<div class="print-section">
    <div *ngIf="printOrientation === orientationEnum.Landscape">
        <style>
            @media print {
                @page {
                    orientation: landscape !important;
                }
            }
        </style>
    </div>
    <div *ngIf="printOrientation === orientationEnum.Portrait">
        <style>
            @media print {
                @page {
                    orientation: portrait !important;
                }
            }
        </style>
    </div>
</div>

The same code is added within the component style/styleUrls metadata.

I have also tried adding classes to the generated components dynamically, after the component is created:

let element: HTMLElement = <HTMLElement>componentRef.location.nativeElement;
this.printTemp.layout === PrintLayoutEnum.Landscape ? element.classList.add('landscape-print') : element.classList.add('portrait-print');

This doesn't affect the orientation at all.

Expected outcome is to change the orientation appropriately. Either by setting the style in app.component.html, or by applying the dynamically when the component is rendered with the ComponentFactoryResolver. I prefer the second options, but either one should be fine.

Answer 1

I got tunnel vision and I tried to over-complicate the solution. I created a style element with id. During the component creation with the ComponentFactoryResolver, I simply appended the desired style:

let styleElement = document.getElementById('print-style');
styleElement.append('@media print { @page { size: A4 landscape; } }')