{"id":14973289,"url":"https://github.com/selemxmn/ngx-print","last_synced_at":"2025-05-15T07:03:13.868Z","repository":{"id":33567424,"uuid":"158467260","full_name":"selemxmn/ngx-print","owner":"selemxmn","description":":printer: A plug n' play Angular (2++) library to print your stuff ","archived":false,"fork":false,"pushed_at":"2024-12-04T02:56:51.000Z","size":1240,"stargazers_count":168,"open_issues_count":24,"forks_count":60,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-05T13:44:57.469Z","etag":null,"topics":["angular","angular-2","angular4","angular5","angular6","dependency","library","npm","print","printing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/selemxmn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-21T00:12:00.000Z","updated_at":"2025-04-14T01:14:29.000Z","dependencies_parsed_at":"2024-05-05T17:29:58.203Z","dependency_job_id":"94ad1ddb-d941-49b0-ab82-1b132f37a614","html_url":"https://github.com/selemxmn/ngx-print","commit_stats":{"total_commits":138,"total_committers":21,"mean_commits":6.571428571428571,"dds":0.5652173913043479,"last_synced_commit":"d363a9654a8e16a87944bb393a4ebf9ee753b705"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemxmn%2Fngx-print","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemxmn%2Fngx-print/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemxmn%2Fngx-print/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemxmn%2Fngx-print/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selemxmn","download_url":"https://codeload.github.com/selemxmn/ngx-print/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254291961,"owners_count":22046424,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-2","angular4","angular5","angular6","dependency","library","npm","print","printing"],"created_at":"2024-09-24T13:48:29.837Z","updated_at":"2025-05-15T07:03:13.809Z","avatar_url":"https://github.com/selemxmn.png","language":"TypeScript","funding_links":["https://www.paypal.me/selemxmn/2"],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Dec 04, 2024](/content/2024/12/04/README.md)","Printing"],"readme":"[![](https://badgen.net/npm/dt/ngx-print)](https://www.npmjs.com/package/ngx-print) [![](https://travis-ci.org/selemxmn/ngx-print.svg?branch=master)](https://travis-ci.org/selemxmn/ngx-print) [![Coverage Status](https://coveralls.io/repos/github/selemxmn/ngx-print/badge.svg?branch=unit-tests)](https://coveralls.io/github/selemxmn/ngx-print?branch=unit-tests)\n\n# ngx-print : *plug n' play Angular (2++) directive to print your stuff*\nThis directive makes printing your HTML sections smooth and easy in your Angular application. It is inspired from the old [AngularJS ngPrint](https://github.com/gilf/ngPrint) directive, thus it is intendend to be used with the new Angular -2/4/5/6/7-... ***Enjoy ! contributions are so welcomed :)***\n\n## Dependencies\n| ngx-print    | Angular      |\n| ------------ | ------------ |\n| 1.2.1        | 7.0.0 - 14.1.0   |\n| 1.3.x        | 15.0.0       |\n| 1.4.x        | 16.0.0       |\n| 1.5.x\t\t     | 17.0.0\t\t    |\n| 2.x.x\t\t     | 18.0.0\t\t    |\n\n### Note\nThe versioning strategy has been updated from incrementing minor versions (1.5.x) to using major versions (2.x.x). This change ensures that npm update will no longer automatically upgrade to an unsupported Angular version. Previously, this was overlooked, leading to potential compatibility issues. Starting with version 2.x.x, we are addressing this oversight to ensure better version management going forward.\n\n## Setup\n\n **1-** In your root application folder run:\n```bash\n$ npm install ngx-print\n```\n\n **2-** Once `ngx-print` is installed, you need to import the main module `NgxPrintModule` :\n\n   ```js\nimport {NgxPrintModule} from 'ngx-print';\n\n@NgModule({\n  ...\n  imports: [NgxPrintModule, ...],\n  ...\n})\nexport class YourAppModule {\n}\n```\n\n **3-** Then plug n' play with it: \n\n - Assuming you want to print the following HTML section:\n\n```html\n\u003cdiv\u003e\n  \u003c!--Your html stuff that you want to print--\u003e\n\u003c/div\u003e\n\u003cbutton\u003eprint\u003c/button\u003e \u003c!--Your relevant print button--\u003e\n\n```\n\n - 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 :\n\n```html\n \u003c!--\n   1)- Add an ID here\n --\u003e\n\u003cdiv id=\"print-section\"\u003e \n  \u003c!--Your html stuff that you want to print--\u003e\n\u003c/div\u003e\n\n \u003c!--\n   2)- Add the directive name in your button (ngxPrint),\n   3)- Affect your ID to printSectionId\n --\u003e\n\u003cbutton printSectionId=\"print-section\" ngxPrint\u003eprint\u003c/button\u003e \n\n```\n## Optional properties\n\n- You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button `printTitle`:\n\n\n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton  \n\tprintTitle=\"MyTitle\"  \n\tprintSectionId=\"print-section\"  \n\tngxPrint\u003eprint\u003c/button\u003e\n\n```\n\n  \n- 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`:\n\n  \n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n\t[printStyle]=\"{h1 : {'color': 'red'}, h2 : {'border': 'solid 1px'}}\"\n\tprintSectionId=\"print-section\"\n\tngxPrint\u003eprint\u003c/button\u003e\n\n```\n\nHere some simple styles were added to every `h1` \u0026 `h2` tags within the `div` where `print-section` is tagged to its `id` attribute.\n  \n- If you would like to use your existing CSS with media print you can add the `useExistingCss` attribute:\n\n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  [useExistingCss]=\"true\"\n\tprintSectionId=\"print-section\"\n\tngxPrint\u003eprint\u003c/button\u003e\n\n```\n\n- If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css use `styleSheetFile`:\n\n\n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  styleSheetFile=\"assets/css/custom1.css,assets/css/custom2.css\"\n  printSectionId=\"print-section\"\n  ngxPrint\u003eprint\u003c/button\u003e\n\n  ```\n  \n- If you would like to show a preview without a print dialog use \n`previewOnly`:\n\n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n  [previewOnly]=\"true\"\n\tprintSectionId=\"print-section\"\n\tngxPrint\u003eprint\u003c/button\u003e\n\n```\n\n- 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...\":\n\n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n\t[closeWindow]=\"false\"\n\tprintSectionId=\"print-section\"\n\tngxPrint\u003eprint\u003c/button\u003e\n\n```\n\n- 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:\n\n```html\n\n\u003cdiv  id=\"print-section\"\u003e\n\n\u003c!-- ... --\u003e\n\n\u003c/div\u003e\n\n\u003cbutton\n\t[bodyClass]=\"theme-dark\"\n\tprintSectionId=\"print-section\"\n\tngxPrint\u003eprint\u003c/button\u003e\n\n```\n\n- 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.\n\n```html\n\u003cbutton\n\t[openNewTab]=\"true\"\n\tngxPrint\u003eprint\u003c/button\u003e\n```\n\n## Using NgxPrint as a service (v1.5+)\nInject the NgxPrintService in the constructor of your component or service:\n\n```typescript\nconstructor(private printService: NgxPrintService) { }\n```\n\n### Printing a Section\n```typescript\nimport { PrintOptions } from './path-to-your/print-options.model';\n\nprintMe() {\n  const customPrintOptions: PrintOptions = new PrintOptions({\n      printSectionId: 'print-section',\n      // Add any other print options as needed\n  });\n  this.printService.print(customPrintOptions)\n}\n```\n\n### Print Options Object\nThe 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:\n```typescript\n  printSectionId: string = null;\n  printTitle: string = null;\n  useExistingCss: boolean = false;\n  bodyClass: string = '';\n  openNewTab: boolean = false;\n  previewOnly: boolean = false;\n  closeWindow: boolean = true;\n  printDelay: number = 0;\n```\n\n### Setting PrintStyles or StyleSheets\n```typescript\n// Optional property for css as a key-value pair\nthis.printService.printStyle = styleSheet;\n\n// Optional property for a css file location\nthis.printService.styleSheetFile = fileLocation;\n```\n\n## Content-Security-Policy (CSP) Support\nIf Angular is configured to use a [CSP Nonce](https://angular.io/api/core/CSP_NONCE), ngx-print will automatically inject the `[printStyle]` CSS rules with this Nonce authorization.\n\n## Contributors :1st_place_medal: \n\nHuge thanks to: [deeplotia](https://github.com/deeplotia) , [Ben L](https://github.com/broem) , [Gavyn McKenzie](https://github.com/gavmck) , [silenceway](https://github.com/silenceway), [Muhammad Ahsan Ayaz](https://github.com/AhsanAyaz), [Core121](https://github.com/Core121) and to all  `ngx-print` users \n\n## Donation\n\nDid this project help you reducing time? I won't say no to a cup of coffee 🍵 :)\n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/selemxmn/2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemxmn%2Fngx-print","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselemxmn%2Fngx-print","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemxmn%2Fngx-print/lists"}