title: How can I print a single component in Angular?
body: <p>In a single angular component I wish have a print button which when the user clicks, will print a single <code>div</code> from my component's template.</p>
  
  <p>I know <a href="https://stackoverflow.com/a/41379912/1011591">this</a> answer works, I've tried it. But I do not like how I need to reapply all styles or rewrite all the styles in the <code>&lt;style&gt;</code> head tags.</p>
  
  <p>I really like <a href="https://stackoverflow.com/a/48000673/1011591">this</a> answer but I can't get it to work. I think it might have something to do with how classes are renamed after the app has been served/built.</p>
  
  <p>This is how I've implemented the above answer but can't get it to work.</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>onPrint() {
    window.print();
  }
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;div class="print"&gt;
    &lt;button (click)="onPrint()"&gt;Print&lt;/button&gt;
    all the stuffs I want to print
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>component.scss</strong></p>
  
  <pre><code>@media print {
    :not(.print) {
      display: none !important;
    }
  }
  </code></pre>
  
  <p><strong>How can I get the above answer to work resulting as little code as possible, and retaining the styles applied to the front-end?</strong></p>
  
  <p>I realize how similar the question is to <a href="https://stackoverflow.com/questions/41379274/print-html-template-in-angular-2-ng-print-in-angular-2">this</a> one but this question was asked almost two years ago and with regards to angular 2. Not quite sure how different it is with regards to angular 6.</p>