ngx-printable-area

Angular directive to print specific areas of your application with support for multiple zones and loading screens.

✨ Major Features

✅ Print only a specific area of your page
✅ Supports printing multiple zones at once
✅ Shows a customizable loading message before printing
✅ Works with Standalone Components and NgModules
✅ Extremely lightweight and zero dependencies
✅ Compatible with Angular 17+

🚀 Installation

Install the package via npm:

npm install --save ngx-printable-area

or with yarn:

yarn add ngx-printable-area

⚙️ Basic Usage

If you’re using Angular standalone components:

import { PrintableAreaDirective } from 'ngx-printable-area';

@Component({
  standalone: true,
  imports: [PrintableAreaDirective],
  template: `
    <div
      ngxPrintableArea
      #printRef="ngxPrintDirective"
      [printTitle]="'My Report'"
      [printStyles]="['/assets/print.css']"
      [loadingTemplate]="'<p>Loading document...</p>'"
    >
      <h1>Report Title</h1>
      <p>Content to print</p>
    </div>

    <button (click)="printRef.print()">Print this section</button>
  `
})
export class DemoComponent {}

Or import the module in your NgModule:

import { PrintableAreaDirective } from 'ngx-printable-area';

@NgModule({
  declarations: [],
  imports: [PrintableAreaDirective],
})
export class AppModule {}

Print Multiple Zones

<div
  ngxPrintableArea
  printId="header"
  [loadingTemplate]="'<p>Preparing document...</p>'"
>
  <h1>Header Section</h1>
</div>

<div
  ngxPrintableArea
  printId="content"
>
  <p>Main content of the report.</p>
</div>

<div
  ngxPrintableArea
  printId="footer"
>
  <p>Footer information.</p>
</div>

<button (click)="printMultiple()">Print Full Report</button>

And in your component:

import { Component } from '@angular/core';
import { PrintService } from 'ngx-printable-area';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private printService: PrintService) {}

  printMultiple() {
    this.printService.printAreas(
      ['header', 'content', 'footer'],
      'Full Report',
      ['/assets/print.css'],
      '<p>Generating report…</p>'
    );
  }
}

📦 Directive API

PrintableAreaDirective

| Input | Type | Description | | ----------------- | ---------- | ------------------------------------------------------ | | printTitle | string | Title of the printed document window. | | printStyles | string[] | Array of URLs to stylesheets for the print window. | | loadingTemplate | string | HTML shown while preparing the print window. | | printId | string | Unique ID to identify the print area (for multi-zone). |

Methods

| Method | Description | | -------------------- | --------------------------------------------------------- | | print() | Prints only the content of this specific directive area. |

PrintService

| Method | Description | | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------| | printAreas(ids?: string[], title?: string, styles?: string[], loadingTemplate?: string) | Prints multiple registered areas. Pass specific IDs, or omit for printing all registered zones. |

🎯 Compatibility

Angular 17+

Modern browsers

📦 License

MIT © 2025

☕ Buy Me a Coffee

If you find this library helpful, you can support my work:

👉 Buy Me a Coffee

🔑 Keywords

angular, ngx, print, printable area, print directive, angular printing, print html, print section, angular standalone, angular directive, ngx library, angular library, ui directive