How to print a single page using angular 13?

Question

i have a collection of component in a module and i have to print a single component when i click the print button..as of now i have print the all component back to back in the print page.any one know the solution

Thanks in advance

Tuhin Paul · Answer

we call the "print()" function to print the page and restore the original HTML content of the page.

Tuhin Paul · Answer

Single component in Angular 13.. Step 1: Add a "print" button in your component template and bind it to a click event. Print Step 2: Import the "Renderer2" service in your component file. import { Component, OnInit, Renderer2 } from '@angular/core'; Step 3: Inject the "Renderer2" service in the constructor of your component. constructor(private renderer: Renderer2) { } Step 4: Create a function to print the component when the "print" button is clicked. printComponent() { const printContents = document.getElementById('component-to-print').innerHTML; const originalContents = document.body.innerHTML; document.body.innerHTML = printContents; this.renderer.setStyle(document.body, 'margin', '0'); this.renderer.setStyle(document.body, 'padding', '0'); window.print(); document.body.innerHTML = originalContents; } In this function, we first get the HTML content of the component that we want to print (in this example, we are assuming that the component has an ID of "component-to-print"). To store the original HTML content of the page, replace it with the HTML content of the component, and apply some styling to remove margins and paddings.

Tuhin Paul · Answer

You can create a separate component for the content you want to print and use the @ViewChild decorator to reference the component in your parent component. Then, in your parent component, you can create a function to open the print dialog and pass the component reference to the window.print() method.

How to print a single page using angular 13?

Answers (3)