Angular 11 Print Page Example

Angular 10/11 print page example. In this tutorial, you will learn step by step how to print page in angular 9/10/11 app without using any package.

If you want to add print button for user to print current page in angular 9/10/11 app. So, this tutorial will explain you on how to print web page in angular 9/10/11 app without using any package.

And as well as, you can easily implement print web page functionality in angular 9/10/11 version app using this example tutorial.

How to Print Page In Angular 11?

  • Step 1 – Create New Angular App
  • Step 2 – Add Code on View File
  • Step 3 – Add Code On app.Component ts File
  • Step 4 – Start the Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Add Code on View File

In this step, create web page print in angular 11 app. So, visit src/app/ and app.component.html and update the following code into it:

<h1>Angular Print Page Example - Tutsmake.com</h1> <p> This is the page print example in angular 11 :)
</p> <button (click)="printPage()">print</button>

Step 3 – Add Code On app.Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

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(); }
}

Step 4 – Start the Angular App

In this step, execute the following command on terminal to start angular bootstrap carousel app:

ng serve

Recommended Angular Posts

Related Posts