No Password Management

    ngx-print
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    Coverage Status

    ngx-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 inspired from the old AngularJS ngPrint directive, thus it is intendend to be used with the new Angular -2/4/5/6/7-... Enjoy ! contributions are so welcomed :)

    Setup

    1- In your root application folder run:

    $ npm install ngx-print

    2- Once ngx-print is installed, you need to import the main module NgxPrintModule :

    import {NgxPrintModule} from 'ngx-print';
    
    @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>

    Contributors 🥇

    Huge thanks to: deeplotia , Ben L , Gavyn McKenzie , silenceway, Muhammad Ahsan Ayaz and to all ngx-print users

    Donation

    Did this project help you reducing time? I won't say no to a cup of coffee 🍵 :)

    paypal

    Install

    npm i ngx-print

    DownloadsWeekly Downloads

    22,231

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    148 kB

    Total Files

    24

    Last publish

    Collaborators

    • selemxmn
    • broem