How to print a single page using angular 13?

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

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.

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.