Angular 12 Print Page Tutorial

Angular 12 print page example. In this tutorial, i am going to show you how to print page in angular 12 app without using any package.

Using this tutorial, you can easily implement print web page functionality in angular 12 version app using this example tutorial.

How to Print Page In Angular 12

• 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

Execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Add Code on View File

Create web page print in angular 12 app. So, visit src/app/ and app.component.html and update the following code into it:

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

Step 3 – Add Code On app.Component ts File

Go to 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

Execute the following command on terminal to start angular bootstrap carousel app:

ng serve

Recommended Angular Tutorials