Angular 13 Print Page Button Example

Angular 13 print page example; Through this tutorial, i am going to show you how to implement print page button in angular 13 apps.

Angular 13 Print Page Example

Follow the below given steps to implement print page in angular 13 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

Run the following command on command prompt to install angular app:

ng new my-new-app

Step 2 – Create Print Page Button on View File

Go to src/app/ and app.component.html and add the following code into it:

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

Step 3 – Add Code On app.Component ts File

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

Run the following command on command prompt to start angular print page apps:

ng serve

Recommended Angular Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *