Plug n' Play Angular (2++) directive to print your stuff
npm install ngx-print  
bash
$ npm install ngx-print
`
2- Once ngx-print is installed, you need to import the directive NgxPrintDirective:
`ts
import { NgxPrintDirective } from 'ngx-print';
@Component({
...
imports: [NgxPrintDirective]
...
})
export class PrintExampleComponent {}
`
3- Then plug n' play with it:
- Assuming you want to print the following HTML section:
`html
`
- Now, what you have to do is tagging your wanted-to-print section by an id attribute, then link that id to a directive parameter in your button :
`html
`
Optional properties
- You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button printTitle:
`html
printSectionId="print-section"
ngxPrint>print
`
- Also, would you like to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite styles to another attribute called printStyle:
`html
printSectionId="print-section"
ngxPrint>print
`
Here some simple styles were added to every h1 & h2 tags within the div where print-section is tagged to its id attribute.
- If you would like to use your existing CSS with media print you can add the useExistingCss attribute:
`html
printSectionId="print-section"
ngxPrint>print
`
- If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css use styleSheetFile:
`html
printSectionId="print-section"
ngxPrint>print
`
- If you would like to show a preview without a print dialog use previewOnly:
`html
printSectionId="print-section"
ngxPrint>print
`
- Some print operations open a second dialog, and automatically closing the popup window happens before the second dialog opens. Set closeWindow to false to handle print operations that open a second dialog, like "Microsoft Print to PDF", or "Print using system dialog...":
`html
printSectionId="print-section"
ngxPrint>print
`
- Set bodyClass to whatever class values are needed for some of your css rules that expect an ancestor to have a certain class. For example, a theme selector:
`html
printSectionId="print-section"
ngxPrint>print
`
- To print in a new tab rather than a new window set the property openNewTab to true. By default openNewTab is false and ngxPrint will open a new print window.
`html
ngxPrint>print
`
- To run a function after printing completes, subscribe to the printCompleted event. Please note it is impossible to differentiate between the Cancel or Print buttong being clicked on the print window. This event will fire regardless of which button was clicked:
`html
printSectionId="print-section"
ngxPrint>print
`
Using NgxPrint as a service (v1.5+)
Inject the NgxPrintService into your component or service:
`ts
private readonly printService = inject(NgxPrintService);
`
$3
`typescript
import { PrintOptions } from './path-to-your/print-options.model';
printMe(): void {
const customPrintOptions: PrintOptions = new PrintOptions({
printSectionId: 'print-section',
// add any other print options as needed
});
this.printService.print(customPrintOptions)
}
`
$3
The print options object allows you to specify how the print job should be handled. All of which have default values that you can optionally override, although printSectionId is required. It contains the following properties:
`typescript
printSectionId: string = null;
printTitle: string = null;
useExistingCss: boolean = false;
bodyClass: string = '';
openNewTab: boolean = false;
previewOnly: boolean = false;
closeWindow: boolean = true;
printDelay: number = 0;
`
$3
`typescript
// Optional property for css as a key-value pair
this.printService.printStyle = styleSheet;
// Optional property for a css file location
this.printService.styleSheetFile = fileLocation;
`
$3
`typescript
this.printService.printComplete$.pipe(take(1)).subscribe(() => {
console.log('Print completed!');
});
`
Content-Security-Policy (CSP) Support
If Angular is configured to use a CSP Nonce, ngx-print will automatically inject the [printStyle] CSS rules with this Nonce authorization.
Contributors :1st_place_medal:
Huge thanks to: deeplotia , Ben L , Gavyn McKenzie , silenceway, Muhammad Ahsan Ayaz, Core121 and to all ngx-print` users