{"id":22465189,"url":"https://github.com/plaetzchen79/ngx-printer-demo","last_synced_at":"2026-01-12T02:31:58.615Z","repository":{"id":34887961,"uuid":"186669598","full_name":"plaetzchen79/ngx-printer-demo","owner":"plaetzchen79","description":"A simple Angular service to print a window, parts of a window (div),  images, HTMLElements or Angular Objects","archived":false,"fork":false,"pushed_at":"2024-06-04T18:12:37.000Z","size":3059,"stargazers_count":30,"open_issues_count":5,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-06T19:55:20.213Z","etag":null,"topics":["angular","angular-library","print","printerservice","printing","service"],"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/plaetzchen79.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-05-14T17:30:14.000Z","updated_at":"2024-08-20T07:06:03.000Z","dependencies_parsed_at":"2024-06-18T22:43:26.098Z","dependency_job_id":"bdcbbb82-251c-4e5b-8619-ed79c4f6b9fc","html_url":"https://github.com/plaetzchen79/ngx-printer-demo","commit_stats":{"total_commits":127,"total_committers":4,"mean_commits":31.75,"dds":0.3779527559055118,"last_synced_commit":"fe0ac6f333c0f3a2551458d43b337732e57d86f4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaetzchen79%2Fngx-printer-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaetzchen79%2Fngx-printer-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaetzchen79%2Fngx-printer-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plaetzchen79%2Fngx-printer-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plaetzchen79","download_url":"https://codeload.github.com/plaetzchen79/ngx-printer-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228446456,"owners_count":17921105,"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-library","print","printerservice","printing","service"],"created_at":"2024-12-06T10:02:04.597Z","updated_at":"2026-01-12T02:31:58.608Z","avatar_url":"https://github.com/plaetzchen79.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/plaetzchen79"],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Dec 04, 2024](/content/2024/12/04/README.md)","Printing"],"readme":"# NgxPrinterDemo\n\nA easy to use service to print the window, parts of a window (div) or an image.\nPrinting of Angular Templates or Components is possible.\n\nYou can print opening a new window / tab or using the current window.\nA directive can also be used to mark and store an HTML-element.\n\nSeveral usefull directives can further assist you.\n\nSee the DEMO App and [DEMO-Page](https://plaetzchen79.github.io/) for examples.\n\n# Usage\n1. Add to main *app.module* imports\n2. Use the *NgxPrinterService* where you like via DI (private printerService: NgxPrinterService)\n3. Use the the functions provided by the service\n\n**Easy start**\n\nThe easiest way to print an HTML Element is \nHTML:\n```html\n\u003cdiv ngxPrintItemMarker directPrint=\"true\"\u003e\u003c/div\u003e\n```\n\n## Options\n### Open new window\nThe service prints by opening a new window.\nThere is an option *printWindowOpen* to change this behavoir.\nSet printWindowOpen=false;\n\nYou can also set this option in .forRoot while importing the\nmodule to the *app.module*\n\n```javascript\n    imports: [\n    BrowserModule,\n    NgxPrinterModule.forRoot({printOpenWindow: true})\n  ],\n```\n### Rendering time\nBefore openening the print window the service to some time to render the print content.\nDefault time is 200ms.\nYou can adjust the time using the property *timeToWaitRender* (also in forRoot).\n\n### Default CSS-Class\nWhen printing to the current window the service creates an component with a\ncss-class called 'default'.\nYou can override this class *name* using the property *renderClass* (also in forRoot).\nMake sure that the class is placed in your global styles (styles.css).\n\n### Name of app-root\nWhen printing to the current window the service searches the app-root component. If you have changed the name of the root component in your app you can override the name using the property *appRootName*.\n\n### Position of image for directive 'ngxPrintItemMarker'\nThe maker image is placed to the bottom left. You can change this by changing the\nproperty *markerPosition*. Use a value of the enum  *ngxPrintMarkerPosition* (TopLeft, .TopRight, .BottomLeft, .BottomRight).\n\n### Print preview - not fire print event\nIf you want to display a preview without fireing the print event you can use *printPreviewOnly = true*. This can also be usefull for debugging purposes.\n\n## Functions - How to print \n### Print current window\n`this.printerService.printCurrentWindow();`\n\n### Print div by id\n`this.printerService.printDiv('idOfDivToPrint');`\n\n### Print image src/url directly\n`this.printerService.printImg('assets/bratwurst.jpg');`\n\n### Print Angular TemplateRef or Component\n```javascript\n @ViewChild('PrintTemplate')\n  private PrintTemplateTpl: TemplateRef\u003cany\u003e;\n\nprintTemplate() {\n    this.printerService.printAngular(this.PrintTemplateTpl);\n  }\n```\nBeware: To print a component the component needs to be known by service (copy source and add it to entry\ncomponent of app.module).\nOtherwise use printHTMLElement instead.\nYou can pass an optional context as the second parameter.\n\n### Print HTML Element\n```javascript\n @ViewChild(LittleDummyComponent, {read: ElementRef}) PrintComponent: ElementRef;\n\n printHTMLElementToCurrent() {\n    this.printerService.printHTMLElement(this.PrintComponent.nativeElement);\n  }\n```\n\n## Event of print window\nIf you want to check whether the print window is open or not subscribe to observable\n*$printWindowOpen*\n\n```javascript\nthis.printWindowSubscription = this.printerService.$printWindowOpen.subscribe(val =\u003e {\n      console.log('Print window is open:', val);\n});\n```\n\n## Directive ngxPrintItem\n There is an directive ngxPrintItem to mark and store an HTML-Element as an item which can be printed \n later and anyhwere on the page.\n An id has to be set.\n These items are stored in the services observable *printerService.$printItems*.\n\n ### function 'printPrintItem'\n Use the async pipe to subscribe and then call the function `printPrintItem`  to print **one** item.\n\n HTML:\n```html\n\u003cspan id=\"firstPrintItem\" ngxPrintItem printName=\"First one\" \u003eA \u003cb\u003efirst\u003c/b\u003e span with an ngxPrintItem directive\u003c/span\u003e\n\n\u003cdiv *ngFor=\"let prinItem of $printItems | async\"\u003e\n  \u003cspan\u003e{{prinItem.id}} - {{prinItem.printName}}\u003c/span\u003e\n  \u003cbutton (click)=\"printItem(prinItem)\"\u003ePrint me!\u003c/button\u003e\n\u003c/div\u003e\n```\nTS:\n```javascript\n  printItem(itemToPrint: PrintItem) {\n    this.printerService.printPrintItem(itemToPrint);\n  }\n});\n```\n\n### function 'printPrintItems'\nYou can also use the function `printPrintItems(itemsToPrint, ?customCssClass)` to print more than one item.\nThe items will be printed beneath each other (simple flex css). To arrange them side by side you can set your custom\nclass as a second parameter.\n\nTS:\n```javascript\n  this.$printItems.subscribe(items =\u003e {\n      itemsToPrint = items as PrintItem[];\n    });\n\n    this.printerService.printPrintItems(itemsToPrint);\n```\n\n## Directive ngxPrintItemButton\nIf you want to print a single item from the list of ngxPrintItems (see above) or other HTML-elements without ts you can use the diretive ngxPrintItemButton. \nYou can use\n- an id of the printItem from the list\n- a class name (className=\"ABC\") of an HTML element\n- an id of an HTML element (divID = \"\") of an HTML element\n- an property to print the whole window (printWindow=\"true\")\n\nThe Click-Event to print the item will be automatically set.\n\nHTML:\n```html\n\u003cbutton ngxPrintItemButton printItemId=\"firstPrintItem\"\u003ePrint first item directly\u003c/button\u003e\n\u003cbutton ngxPrintItemButton className=\"printident\"\u003e\n  Print item by className with this button\n\u003c/button\u003e\n\u003cbutton ngxPrintItemButton divID=\"printDiv\"\u003e\n  Print div by id with this button\n\u003c/button\u003e\n\u003cbutton ngxPrintItemButton printWindow=\"true\"\u003e Print whole window with this button \u003c/button\u003e\n```\n\n## Directive ngxPrintItemMarker\nIf you want to indicate an item as printable you can use this directive.\nThe default class adds a little printer symbol to the top left of the html element.\n\n### Show marker/icon\nJust display marker.\n\nHTML:\n```html\n\u003cdiv ngxPrintItemMarker\u003e\n```\n\n### Print after marker click\nIf you click the little printer print starts immediately.\n\nHTML:\n```html\n\u003cdiv ngxPrintItemMarker directPrint=\"true\"\u003e\u003c/div\u003e\n```\n\n## Directive ngxNoPrint\nUse this directive to prevent an sub-item (child) to be printed.\n\n### Customization\nYou can override the default class with the `customClass` property.\nMake sure that the css class is globally accessable e.g. put it into \"styles.css\".\nYou can also only override the image using the property `backgroundImage`. You can\nspeficy the data for the *background-url*.\n\n### Event \nYou can listen to the event 'printClicked'.\n\nHTML:\n```html\n\u003cdiv id=\"printDivMarker\" ngxPrintItemMarker (printClicked)=\"printerMarkerClicked()\"\u003e\n\n\u003cdiv id=\"printDivMarker\" ngxPrintItemMarker customClass=\"mymarker\" \u003e\n```\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n\n# Buy me a coffee\n..if you like this lib ;-)\n\n\u003ca href=\"https://www.buymeacoffee.com/plaetzchen79\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-blue.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaetzchen79%2Fngx-printer-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplaetzchen79%2Fngx-printer-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplaetzchen79%2Fngx-printer-demo/lists"}