Print Html template in Angular 2 (ng-print in Angular 2)

by

That’s how I’ve done it in angular2 (it is similar to that plunkered solution) In your HTML file:

<div id="print-section">
  // your html stuff that you want to print
</div>
<button (click)="print()">print</button>

and in your TS file :

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

UPDATE:

You can also shortcut the path and use merely ngx-print library for less inconsistent coding (mixing JS and TS) and more out-of-the-box controllable and secured printing cases.

More Related Contents:

  1. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  2. Angular 2: Callback when ngFor has finished
  3. Is it a bad practice to use jQuery in Angular? [closed]
  4. How to load external scripts dynamically in Angular?
  5. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  6. How to dynamically change header based on AngularJS partial view?
  7. What’s the recommended way to extend AngularJS controllers?
  8. Losing scope when using ng-include
  9. SyntaxError: Unexpected token o in JSON at position 1
  10. Angular: Can’t find Promise, Map, Set and Iterator
  11. Angular2 component’s “this” is undefined when executing callback function
  12. angularjs: allows only numbers to be typed into a text box
  13. Dynamic NG-Controller Name
  14. “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error for response from http://www.google.com/
  15. Angularjs: call other scope which in iframe
  16. Load existing components dynamically Angular 2 Final Release
  17. Firestore Timestamp.fromDate not UTC
  18. Angular ui router unit testing (states to urls)
  19. Angular.js: set element height on page load
  20. execute a function when *ngFor finished in angular 2
  21. How to cancel a subscription in Angular2
  22. How can I handle browser tab close event in Angular? Only close, not refresh
  23. How can I access the value of a promise?
  24. What is Angular 4 and from where I can learn more about it?
  25. Angular why asterisk (*)
  26. FormData how to get or set boundary in multipart/form-data – Angular
  27. How to usemultiple Angular UI Bootstrap Datepicker in single form?
  28. How to set angular controller object property value from directive in child scope
  29. AngularJS: can’t get html5 mode urls with ui-route $state
  30. How to Create simple drag and Drop in angularjs

Leave a Comment