NgDocumentReader

This project was generated using Angular CLI version 19.2.0. Here's how to do it:

Absolutely! Here's the updated README.md with the note that the component can receive custom Angular components like <app-btn> using the header-action slot:

# 📘 Ng Document Reader

**NgDocumentReader** is a standalone Angular component for rendering and printing styled HTML content as A4 documents (portrait or landscape). It includes zoom controls, layout switching, and print capabilities—perfect for dynamic, printable content like invoices, certificates, or formatted reports.

---

## 📦 Installation

Install via npm:

```bash
npm install ng-document-reader@latest

🧩 Usage

1. Import the Component

For standalone components:

import { NgDocumentReaderComponent } from 'ng-document-reader';

@Component({
  standalone: true,
  imports: [NgDocumentReaderComponent],
  templateUrl: './your-component.html',
})
export class YourComponent {}

2. Basic Example

<lib-ng-document-reader orientation="portrait">
  <div>
    <h1>Document Title</h1>
    <p>This is a paragraph inside the PDF-ready document.</p>
  </div>
</lib-ng-document-reader>

🔧 Input Properties

| Property | Type | Default | Description | |----------------|-------------------------------------|-------------|-----------------------------------------------------------| | orientation | 'portrait' | 'landscape' | 'portrait'| Page layout mode (A4 Portrait or Landscape) | | Zoom | number | 1 | Initial zoom level (from 0.1 to 2.0) |

🎯 Features

• ✅ Zoom in/out the document
• ✅ Set initial zoom level via input (Zoom)
• ✅ Switch between portrait and landscape layouts
• ✅ Print output with accurate colors (print-color-adjust: exact)
• ✅ Inject custom controls using header-action slot
• ✅ Supports Angular components in header-action (e.g. <app-btn header-action>)

🖨️ Print Styling

The component clones and prints the content with injected styles for accurate preview-to-paper matching.

💡 Custom Header Actions

You can pass in native HTML elements or Angular components using the header-action attribute:

<lib-ng-document-reader orientation="landscape" [Zoom]="1.2">
  <app-btn header-action></app-btn>

  <div>
    <h2>Document with Angular Button</h2>
    <p>This document includes a reusable button component in the header.</p>
  </div>
</lib-ng-document-reader>

You can also use native elements:

<lib-ng-document-reader orientation="portrait">
  <div header-action>
    <button (click)="exportToPDF()" class="btn btn-primary">Export</button>
  </div>

  <div>
    <h1>Report</h1>
    <p>Ready to print or export.</p>
  </div>
</lib-ng-document-reader>

🎨 Layout and Styling

• A4 page sizes:
  • Portrait: 210mm width
  • Landscape: 297mm width
• Content scales responsively using CSS transform: scale(...)
• Zoomable from 0.1 to 2.0

🧪 Full Example

<lib-ng-document-reader orientation="landscape" [Zoom]="0.9">
  <app-btn header-action></app-btn>

  <div style="text-align: center">
    <h1 style="color: navy;">Invoice</h1>
    <p>Generated on {{ today }}</p>
    <table style="width: 100%; border: 1px solid #ccc;">
      <tr><th>Item</th><th>Price</th></tr>
      <tr><td>Angular Course</td><td>$50</td></tr>
    </table>
  </div>
</lib-ng-document-reader>

🛠️ Development

This component was built using Angular CLI version 19.2.0 and supports standalone components and typed Angular templates.

🧾© [tmBekzod]