Welcome folks today in this blog post we will be using the ngx-printer
library in angular 14 to print
html sections of page
with css classes
using typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you need to install the below libraries
using the below command as shown below
npm i ngx-printer
And after that you will see the below directory
structure of the angular app as shown below
And now you need to go to app.module.ts
file and include the module as shown below
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { NgxPrinterModule } from "ngx-printer"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, NgxPrinterModule.forRoot({ printOpenWindow: true, renderClass: "custom-print", printPreviewOnly: false }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} |
As you can see we are including the NgxPrinterModule
and adding it inside the imports
array. And inside it we are passing the options
object where we are providing the custom css
class and also to preview
the print window inside new tab.
And now we need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- ngxPrintItem printName="First one"--> <div style=""> <div id="printDiv" style="width: 14.8cm; height: 10.5cm;position: relative; border: 1px solid red;"> <div class="title">Document title</div> <div class="description">Document description</div> <div class="conclusion">Document conclusion</div> </div> </div> <br /> <!-- ngxPrintItemButton divID="printDiv" --> <button (click)="print()"> print </button> |
As you can see we have the different div
inside the html and we have also attached the css
styles to it. And then we have the simple button to print
the html section inside the new window. And here we have attached the onclick
event listener and we are calling the print()
method. Now we need to define this method inside the typescript.
And now we need to go to app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { Component, AfterViewInit } from "@angular/core"; import { NgxPrinterService } from "ngx-printer"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements AfterViewInit { name = "Angular"; hidePage = false; constructor(private printerService: NgxPrinterService) {} ngAfterViewInit() { this.printerService.$printWindowOpen.subscribe(opened => { this.hidePage = opened; console.log(this.hidePage); }); } print() { const css = ` @page { margin: 0; size: 14.8cm 10.5cm; } `; const head = document.getElementsByTagName("head")[0]; const style = document.createElement("style"); style.type = "text/css"; style.media = "print"; style.appendChild(document.createTextNode(css)); head.appendChild(style); this.printerService.printDiv("printDiv"); } } |
As you can see we are importing the ngxPrinterService
at the top and then inside the constructor we are initializing the printerService
and inside it we are hiding the page. And now inside the print()
method we are setting the css
properties of the page and then we are we are allowing the user to print
the content of the div
section inside the new window as shown below