Angular 11/12 print page example. In this tutorial, you will learn step by step how to print page in angular 11/12 app without using any package.
If you want to add print button for user to print current page in angular 11/12 app. So, this tutorial will explain you on how to print web page in angular 11/12 app without using any package.
And as well as, you can easily implement print web page functionality in angular 11/12 version app using this example tutorial.
How to Print a Page in Angular?
- 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
