Angular TutorialsModules

Angular 9 – Print HTML content with ngx-print module

In this tutorial, we will learn about print HTML in Angular 9 with ngx-print module. This module is freely available in node package manage. There is not any specific reason to print HTML using module. You can also print HTML in Angular with some JavaScript code.

This module support’s latest version of Angular. You will not face any vulnerabilities. It is easy to install and execute it. Only you need a running application in Angular.

Print HTML in Angular 9 with ngx-print

Open terminal window inside your project folder. For me, testapp is the folder. All Angular Application files are inside it.

Shift + Right Click to open terminal window. I am using power shell for it.

Open Terminal Window
Open Terminal Window

Type below command then Hit Enter.

npm install ngx-print

This command will install ngx-print module in your app.

Install ngx-print module
Install ngx-print module

Use below command and then run your application in browser.

ng serve
Run Angular 9 Application
Run Angular 9 Application
Angular 9 Application
Angular 9 Application

Open src/app.component.html file and then remove all content in it.

Copy and Paste below code in app.component.html file then save it.

<h1>Print HTML Test App</h1>
<div id="printdiv"> 
  Here is your html content for print
</div>
  
<button printSectionId="printdiv" ngxPrint>print</button> 

All your content to be print, should be inside printdiv.

In button, I have pass actual id name of div to be print.

Now, open app.module.ts file inside src folder then import NgxPrintModule in it.

Import ngx-print module
Import ngx-print module

Now, open your application in browser.

Print HTML in Angular 9
Print HTML in Angular 9

When you click on print button then it will open print window. In print window, you can see all content inside div with id printdiv.

Print Window
Print Window

Now you can print with your printer.

How to create new application in Angular 9 ?

Let’s create a new application.

Create any folder like DummyProjects then Press Shift + Right Click.

Create new application in Angular 9
Create New Application in Angular 9

You can also use command prompt for it.

Now run below and then Hit Enter

ng new testapp
Run ng new testapp
Run ng new testapp

Select your requirement’s and then wait for the process to complete.

Once process is complete then you can see one folder testapp. Open folder then you can see your application files.

Angular 9 Application Files
Angular 9 Application Files

Press Shift and Right Click then open power shell. You can also browse to this folder in terminal.

Run below and then hit enter.

ng serve

Wait for the process to complete then follow next steps. After that, Open your browser and then visit http://localhost:4200.

Run Angular 9 Application
Run Angular 9 Application
Run Angular 9 Application
Run Angular Application

Have a query ? then click here

Tags

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close