Angular 9+ print HTML
MIT License
This directive makes printing your HTML sections smooth and easy in your Angular application. It is intended to use with the new Angular -2+
1- In your root application folder run:
$ npm install ngx-printx
2- Once ngx-printx
is installed, you need to import the main module NgxPrintModule
:
import {NgxPrintModule} from 'ngx-printx';
@NgModule({
...
imports: [NgxPrintModule, ...],
...
})
export class YourAppModule {
}
3- Then plug n' play with it:
<div>
<!--Your html stuff that you want to print-->
</div>
<button>print</button> <!--Your relevant print button-->
id
attribute, then link that id
to a directive parameter in your button : <!--
1)- Add an ID here
-->
<div id="print-section">
<!--Your html stuff that you want to print-->
</div>
<!--
2)- Add the directive name in your button (ngxPrint),
3)- Affect your ID to printSectionId
-->
<button printSectionId="print-section" ngxPrint>print</button>
printTitle
:
<div id="print-section">
<!-- ... -->
</div>
<button
printTitle="MyTitle"
printSectionId="print-section"
ngxPrint>print</button>
printStyle
:
<div id="print-section">
<!-- ... -->
</div>
<button
[printStyle]="{h1 : {'color': 'red'}, h2 : {'border': 'solid 1px'}}"
printSectionId="print-section"
ngxPrint>print</button>
Here some simple styles were added to every h1
& h2
tags within the div
where print-section
is tagged to its id
attribute.
useExistingCss
attribute:
<div id="print-section">
<!-- ... -->
</div>
<button
[useExistingCss]="true"
printSectionId="print-section"
ngxPrint>print</button>
styleSheetFile
:
<div id="print-section">
<!-- ... -->
</div>
<button
styleSheetFile="assets/css/custom1.css,assets/css/custom2.css"
printSectionId="print-section"
ngxPrint>print</button>