Print Page Example Tutorial Angular 11/12

Print Page Example Tutorial Angular 11/12. We will learn in this tutorial how to print pages in Angular 11/12 without using any package.

It will also make it possible for the user to print the current page in Angular 11/12 if we add the print button. So, we will get step-by-step comprehensive knowledge on how to print a web page in Angular 11/12 without using any package.

In addition to it, we will get to know to implement print web page functionality easily in the Angular 11/12 version by using this example.

Print Page Example Tutorial Angular 11/12

We simply need to follow the given steps for implementing the print page option in Angular 12 app:

Step 1 is to Create the New Angular App

Step 2 is to Add Code on View File

Step 5 is to Add Code On app.Component ts File

Step 6 is to Start the Angular App

Now, let’s learn in detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new print-page-app

Step 2 : Adding the Code on View File

In the next step, create the web page print in the Angular 11 app. Then, we visit src/app/ and app.component.html after which, we update the following code into it:

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

Step 3: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we 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: Starting the Angular App

Lastly, we reach the final step of implementation where we execute the following command on the terminal to start the web print page in the angular app:

ng serve

Conclusion

Finally, we reach the end of this tutorial in which we have explained how to print a web page in Angular 11/12 without using any package. In this tutorial, we have tried to explain it in a very simple easy way. Hope that you will surely find it beneficial. 

Thanks