How to Print a Page in Angular?

By Hardik Savani March 9, 2021 Category : Angular

This tutorial will provide example of how to print page in angular. In this article, we will implement a how to print html page in angular. it's simple example of angular print page with css. we will help you to give example of angular print page to pdf. You just need to some step to done angular print pdf from html.

If you need to add print button and give user to print current page in angular then i will show you simple example how to add print button in angular app.

you can easily print a page for pdf in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13 and angular 14 version app.

So, let's see bellow step and get qr code as like bellow screenshot:

Preview:

src/app/app.component.html

<h1>Angular Print Page Example - ItSolutionStuff.com</h1>

<p>

Start editing to see some magic happen :)

</p>

<button (click)="printPage()">print</button>

src/app/app.component.ts

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

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular ' + VERSION.major;

printPage() {

window.print();

}

}

src/app/app.component.css

@media print {

button {

display: none;

}

}

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...

Tags :