Print HTML in PDF using “ngx-print” in Angular

In this article, we’ll learn how to print your stuff in Angular. For that, we used the “ngx-print” module. Let’s create a new project to implement a print PDF in angular for that you need to run the following command to create a project.

ng new print-demo

“print-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd print-demo”. To Run angular applications, it required to run “ng serve”.

After that, we need to install the ngx-print npm package in our application. For that run the below command to install.

npm install ngx-print

After intsll module we need to import in our module file to use. For that NgxPrintModule need to imported app module and registered in “app.module.ts” file.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";

import {NgxPrintModule} from 'ngx-print';

  imports: [BrowserModule, FormsModule, NgxPrintModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
export class AppModule {}

After adding the module you can use it in our application with the help of a directive. Let’s add the below code in our app.component.ts file.

import { Component, VERSION } from "@angular/core";

  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
  name = "Angular PDF";

below code need to “app.component.html” file.

<div id="print-section">
	Put here your html stuff that you want to print...

<button printTitle="Print Title" printSectionId="print-section" ngxPrint>


Below is the full embeded code for PDF print in angular. you can easily used in your application.

Spread the love
  • 1