Angular 13 ngx-printer Example to Print Sections of DIV’s,Paragraphs or Images inside Page in TypeScript

 

 

npm i ngx-printer

 

 

NgxPrinterDemo

A easy to use service to print the window, parts of a window (div) or an image. Printing of Angular Templates or Components is possible.

You can print opening a new window / tab or using the current window. A directive can also be used to mark and store an HTML-element.

Several usefull directives can further assist you.

See the DEMO App and DEMO-Page for examples.

Usage

  1. Add to main app.module imports
  2. Use the NgxPrinterService where you like via DI (private printerService: NgxPrinterService)
  3. Use the the functions provided by the service

Easy start

The easiest way to print an HTML Element is HTML:

 

 

 

 

 

 

 

 

Directive ngxPrintItem

There is an directive ngxPrintItem to mark and store an HTML-Element as an item which can be printed later and anyhwere on the page. An id has to be set. These items are stored in the services observable printerService.$printItems.

function ‘printPrintItem’

Use the async pipe to subscribe and then call the function printPrintItem to print one item.

HTML:

 

 

 

 

 

 

https://www.npmjs.com/package/ngx-printer

 

Leave a Reply