Angular 14 Print Page Button Example

Angular 14 print page example; In this tutorial, we will learn step by step how to add a print page button in angular 14 app without using any plugin or package.

Angular 14 Print Page Example

Use the following steps to print page in angular 14 apps; as follows:

• Step 1 – Create New Angular App
• Step 2 – Create Print Page Button 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 – Create Print Page Button on View File

In this step, create web page print in angular apps. 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 14 :)
</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 print page apps:

ng serve

Recommended Angular Tutorials