search

aesopo1213 / ngx-printify

1 stars 0 forks source link

Tutorial Request #1

Open finalyXG opened 3 weeks ago

finalyXG commented 3 weeks ago

Hi there, would you mind sharing a ore detailed tutorial for new beginner?

Great thanks!

aesopo1213 commented 3 weeks ago

Sure

NgxPrintify Tutorial

Welcome to the NgxPrintify tutorial! This guide will walk you through the process of setting up and using the NgxPrintify library in your Angular applications. NgxPrintify is a utility library that simplifies printing content with a directive and a service for programmatic control.

Table of Contents

Introduction

NgxPrintify provides a straightforward way to trigger print functionality in your Angular applications. It allows for easy integration into your components and offers a programmatic service for more control.

Installation

To install ngx-printify, you can use npm:

npm install ngx-printify --save

Dependencies

Version Compatibility

NgxPrintify supports the following Angular versions based on its releases:

NgxPrintify Version Angular Versions Supported
1.1.6 Angular 10.0.0 to 14.2.3
1.2.2 Angular 15.0.0
1.3.1 Angular 16.0.0
1.4.1 Angular 17.0.0
1.5.2 Angular 18.0.0

Ensure your Angular project is within the specified version range to utilize NgxPrintify effectively.

Getting Started

Step 1: Create an Angular Project

If you don’t have an Angular project set up, you can create one using Angular CLI:

ng new my-app
cd my-app

Step 2: Install NgxPrintify

Install the ngx-printify package as mentioned earlier:

npm install ngx-printify --save

Step 3: Import NgxPrintifyModule

Next, you need to import the NgxPrintifyModule in your main application module.

Update app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgxPrintifyModule } from 'ngx-printify';

@NgModule({
  imports: [
    BrowserModule,
    NgxPrintifyModule, // Import NgxPrintifyModule here
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 4: Using the Directive

The NgxPrintify directive allows you to print specific elements or templates directly from your HTML.

Create a Component

Generate a new component to demonstrate printing.

ng generate component print-example

Update print-example.component.ts

In your new component, define the print options.

import { Component } from '@angular/core';

@Component({
  selector: 'app-print-example',
  templateUrl: './print-example.component.html',
  styleUrls: ['./print-example.component.css']
})
export class PrintExampleComponent {
  printItemsId: string = 'printableArea'; // ID of the element to print
  printTitle: string = 'Print Example';
  useExistingCss: boolean = true; // Use existing CSS styles
  previewOnly: boolean = false; // Set to true for preview only

  // Custom print styles
  printStyle = {
    'h1': { color: 'blue' },
    '.highlight': { backgroundColor: 'yellow' }
  };
}

Update print-example.component.html

Add the HTML content you want to print and include the ngxPrintify directive.

<div id="printableArea">
  <h1>This is a Test Print Area</h1>
  <p class="highlight">This paragraph will be highlighted in the print.</p>
</div>

<button ngxPrintify
        [printItemsId]="printItemsId"
        [printTitle]="printTitle"
        [useExistingCss]="useExistingCss"
        [printStyle]="printStyle"
        [previewOnly]="previewOnly">
  Print
</button>

Step 5: Using the Service

For programmatic control, you can use the NgxPrintifyService.

Inject the Service

Update your component to inject the NgxPrintifyService.

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NgxPrintifyService } from 'ngx-printify';

@Component({
  selector: 'app-print-example',
  templateUrl: './print-example.component.html',
})
export class PrintExampleComponent {
  @ViewChild('printTemplate') printTemplate!: TemplateRef<any>;

  constructor(private printService: NgxPrintifyService) {}

  print() {
    this.printService.print({
      printItemsId: 'printableArea', // ID of the element to print
      printTitle: 'Print Example',
      useExistingCss: true,
      printStyle: {
        h1: { color: 'red' },
        '.highlight': { border: 'solid 1px' }
      },
      closeWindow: true,
      previewOnly: false,
      printWindowOptions: {
        width: 800,
        height: 600
      }
    });
  }
}

Update the Template

Add a button to trigger the print method:

<button (click)="print()">Print via Service</button>

Customizing Print Options

You can customize the print window options by passing them via both the directive and service.

Example of Custom Options

<button ngxPrintify
        [printItemsId]="printItemsId"
        [printTitle]="printTitle"
        [printWindowOptions]="{ width: 900, height: 700 }"
        [useExistingCss]="useExistingCss"
        [printStyle]="printStyle"
        [previewOnly]="previewOnly">
  Print
</button>

Conclusion

You've now successfully set up and used the NgxPrintify directive and service in your Angular application! This allows you to print specific content easily with customizable options. Feel free to experiment with different styles and templates.

API Reference

NgxPrintifyDirective

Inputs:

NgxPrintifyService

Method:

License

This project is licensed under the MIT License - see the LICENSE file for details.