Angular 11 Print Page Example

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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