@ngxsmart/print

Plug n' play Angular (2++) directive to print your stuff This directive makes printing your HTML sections smooth and easy in your Angular application. It is intended to use with the new Angular -2+

Setup

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:

• Assuming you want to print the following HTML section:

<div>
  <!--Your html stuff that you want to print-->
</div>
<button>print</button> <!--Your relevant print button-->

• 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 :

 <!--
   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>

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:

<div id="print-section">

  <!-- ... -->

</div>

<button
  printTitle="MyTitle"
  printSectionId="print-section"
  ngxPrint>print
</button>

• 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:

<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.

• If you would like to use your existing CSS with media print you can add the useExistingCss attribute:

<div id="print-section">

  <!-- ... -->

</div>

<button
  [useExistingCss]="true"
  printSectionId="print-section"
  ngxPrint>print
</button>

• If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css use styleSheetFile:

<div id="print-section">

  <!-- ... -->

</div>

<button
  styleSheetFile="assets/css/custom1.css,assets/css/custom2.css"
  printSectionId="print-section"
  ngxPrint>print
</button>

Publish the library to NPM(applies to maintainers)

1. Build the library

ng build --configuration production --project=@ngxsmart/print

2. Publish the library to NPM

npm publish dist/print --access public