title: How to properly set print orientation in Angular application?
body: <p>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). </p>
  
  <p>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.</p>
  
  <p>So far, I have tried the following:</p>
  
  <ul>
  <li><p>defined two different div elements conditionally generated (with ngIf directive). Each div contains <code>&lt;style&gt;&lt;/style&gt;</code> elements with appropriate page orientations. The <code>style</code> elements are not rendering, hence orientation is not changed</p></li>
  <li><p>page orientation is defined within the component's style/stuleUrls metadata. This produces the problem with the secondly applied orientation as described above</p></li>
  <li><p>add styling to the dynamically created components with <code>ComponentFactoryResolver</code>. The styling to the page is not applied</p></li>
  </ul>
  
  <p>The component is dynamically generated using the <code>ComponentFactoryResolver</code>. For simplicity, I won't post that code. I will post it if it's needed.</p>
  
  <p>This html is added in the <code>app.component.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="print-section"&gt;
      &lt;div *ngIf="printOrientation === orientationEnum.Landscape"&gt;
          &lt;style&gt;
              @media print {
                  @page {
                      orientation: landscape !important;
                  }
              }
          &lt;/style&gt;
      &lt;/div&gt;
      &lt;div *ngIf="printOrientation === orientationEnum.Portrait"&gt;
          &lt;style&gt;
              @media print {
                  @page {
                      orientation: portrait !important;
                  }
              }
          &lt;/style&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The same code is added within the component style/styleUrls metadata.</p>
  
  <p>I have also tried adding classes to the generated components dynamically, after the component is created:</p>
  
  <pre class="lang-js prettyprint-override"><code>let element: HTMLElement = &lt;HTMLElement&gt;componentRef.location.nativeElement;
  this.printTemp.layout === PrintLayoutEnum.Landscape ? element.classList.add('landscape-print') : element.classList.add('portrait-print');
  </code></pre>
  
  <p>This doesn't affect the orientation at all.</p>
  
  <p>Expected outcome is to change the orientation appropriately. Either by setting the <code>style</code> in <code>app.component.html</code>, or by applying the dynamically when the component is rendered with the <code>ComponentFactoryResolver</code>. I prefer the second options, but either one should be fine.</p>