Ngx Print

ngxPrint is a reusable Angular directive that prints any specified section of your application. Apply it to a button, point it at an element by id, and it opens a print dialog or a live preview window that renders exactly the content you want.

Overview

Examples

Overview

Add the ngxPrint (or print) attribute to a <button> and set printSectionId to the id of the element whose contents should be printed. The directive provides rich printing capabilities including:

Angular Material table support (with pagination)
jQuery DataTable support

With options for custom styling (printStyle), external stylesheets (styleSheetFile), paginated data tables, and a preview-only mode (previewOnly), it makes it easy to print or preview exactly what you need.

API

Selectors

button[ngxPrint], button[print]

The directive must be applied to a <button> element, and printSectionId is required.

Inputs

Name	Type	Default	Description
`printSectionId`	`string \| undefined`	`undefined`	ID of the HTML element whose contents need to be printed
`printTitle`	`string \| undefined`	`undefined`	Title of the document to be printed (appears in print preview)
`useExistingCss`	`boolean`	`false`	If `true`, uses existing CSS from the HTML element, otherwise no CSS applied
`printDelay`	`number`	`0`	Delay in milliseconds before opening the print dialog
`matTableDataSource`	`MatTableDataSource<T>`	—	Instance of the Material Table Data Source (required for Material table support)
`paginator`	`MatPaginator`	—	Instance of the Material Paginator (required for Material table support)
`paginatorId`	`string`	`''`	HTML element ID of the Mat Paginator
`inputFilterId`	`string`	`''`	HTML element ID of the Mat-Table input filter
`isMatTable`	`boolean`	`false`	If `true`, indicates the referenced table is a Material Table
`hideMatTablePaginator`	`boolean`	`false`	If `true`, hides the Mat-Table paginator during printing
`previewOnly`	`boolean`	`false`	If `true`, prevents the print dialog from opening (preview only)
`printStyle`	`PrintStyleParams`	—	Object containing CSS properties to apply while printing
`styleSheetFile`	`string`	`''`	Comma-separated list of CSS file paths to include in the print document

PrintStyleParams

The printStyle input accepts an object whose values map CSS selectors to declaration blocks:

Property	Type	Description
`values`	`Record<string, Record<string, string>>`	Nested map of at-rule / selector to CSS property declarations applied while printing