Angular — Print From Your Angular App

Angular CLI Project Setup

Angular — Print From Your Angular App

Angular is a front-end application used for the creation of web and mobile apps. By design, it uses typescript to construct logic and methods for a class, but typescript is not known to the browser. Webpack is used to compile these typescript files into JavaScript, here the web pack comes in a picture. There are also so many configuration files that you would need to run an angular project on your computer.

Angular CLI is a tool that does all these things for you with some basic commands. Angular CLI uses a web pack behind it.

Note: Please make sure you have the node and npm installed in your system. By using the following command, you can check your node version and npm version:

node –version

npm –version

Steps to Create your first application using angular CLI:

Step-1: Install Angular CLI

npm install – g @angular/CLI

Step-2: Create a new project by this command

Choose yes for routing option and, CSS or SCSS.

ng new myNewApp

Step-3: Go to your project directory

cd  myNewApp

Step-4: Run the server and see your application in action

ng serve -o –poll=2000

Use of ngx printer in Angular

A service that is simple to use for printing a window, a part of a window (div), or an image. It is possible to print angular templates or components. You can print opening a new window/tab or using the current window. You may also use a directive to mark and store an HTML-element. You may be further supported by many other helpful directives.

Usage

1.Add to the main app. module imports.
2.Use the NgxPrinterService where you like via DI (private printer service: NgxPrinterService).
3.Use the functions provided by the service.

Install

npm i ngx-printer

Easy start

The easiest way to print an HTML Element is HTML:

<div ngxPrintItemMarker directPrint=”true”></div>

Options

You can also set this option in .forRoot while importing the module to the app.module

imports: [

BrowserModule,

NgxPrinterModule.forRoot({printOpenWindow: true})

],

Rendering time

Before opening the print window, it takes some time for the service to render the printed content. The default time is 200ms. The time can be adjusted using the property timeToWaitRender (also in forRoot).

Default CSS-Class

When printing to the current window, the service creates a component named ‘default’ with a CSS-class. Using the property renderClass, you can override this class name (also in forRoot). Make sure that your global styles are put in the class (styles.css).

Name of app-root

The service searches for the app-root portion while printing in the current window. If you have modified the name of the root component of your app, use the appRootName property to override the name.

Position of image for directive ‘ngxPrintItemMarker’

The picture of the creator is located on the bottom left. You can change this by adjusting the MarkerPosition property. Use a value of the enum ngxPrintMarkerPosition (TopLeft, .TopRight, .BottomLeft, .BottomRight).

Print preview – not fire print event

You can use printPreviewOnly = true to display a preview without triggering the print case. This can be beneficial for debugging purposes as well.

Functions – How to print

Print current window

this.printerService.printCurrentWindow();

Print div by id

this.printerService.printDiv(‘idOfDivToPrint’);

Print image src/url directly

this.printerService.printImg(‘assets/bratwurst.jpg’);

Print Angular TemplateRef or Component

@ViewChild(‘PrintTemplate’)  private PrintTemplateTpl: TemplateRef<any>;

printTemplate() {

this.printerService.printAngular(this.PrintTemplateTpl);

}

Beware: To print a component, the service needs to know the component (copy source and add it to the entry component of app. module). Alternatively, use PrintHTMLElement instead. As the second parameter, you can enter an optional context.

Print HTML Element

@ViewChild(LittleDummyComponent, {read: ElementRef})

PrintComponent: ElementRef;

printHTMLElementToCurrent() {

this.printerService.printHTMLElement(this.PrintComponent.nativeElement);

}

Event of the print window

You should subscribe to $printWindowOpen if you want to check whether the print window is open or not.

this.printWindowSubscription = this.printerService.$printWindowOpen.subscribe(val => {

console.log(‘Print window is open:’, val);

});

Directive ngxPrintItem

There is a ngxPrintItem directive to mark and store an HTML-Element as an item that can be printed later and anywhere on the page. You need to define an id. These items are stored in the services observable printerService.$printItems.

function ‘printPrintItem’

Use the async pipe to subscribe and then call the function printPrintItem to print one item.

HTML:

<span id=”firstPrintItem” ngxPrintItem printName=”First one” >A <b>first</b> span with an ngxPrintItem directive</span>

<div *ngFor=”let prinItem of $printItems | async”>

<span>{{prinItem.id}} – {{prinItem.printName}}</span>

<button (click)=”printItem(prinItem)”>Print me!</button>

</div>

TS:

printItem(itemToPrint: PrintItem) {

this.printerService.printPrintItem(itemToPrint);

}

});

function ‘printPrintItems’

You can also print more than one item using the function printPrintItems(itemsToPrint, ?customCssClass). The items will be printed underneath each other (simple flex css). You can configure the custom class as a second parameter to arrange them side by side.

TS:

  this.$printItems.subscribe(items => {

itemsToPrint = items as PrintItem[];

});

this.printerService.printPrintItems(itemsToPrint);

Directive ngxPrintItemButton

You may use the ngxPrintItemButton directory to print a single item from the list of ngxPrintItems (see above) or other HTML elements that do not have ts. You should make use of

• an id of the printer from the list
• a class name (className=”ABC”) of an HTML element
• an id of an HTML element (David = “”) of an HTML element
• a property to print the whole window (printWindow=”true”)

The Click-Event to print the item will be automatically set.

HTML:

<button ngxPrintItemButton printItemId=”firstPrintItem”>Print first item directly</button>

<button ngxPrintItemButton className=”printident”>

Print item by className with this button</button>

<button ngxPrintItemButton divID=”printDiv”>

Print div by id with this button</button>

<button ngxPrintItemButton printWindow=”true”>

Print whole window with this button </button>

Directive ngxPrintItemMarker

You may use this directive if you want to define the item as printable. The default class adds to the top left of the HTML element a little printer icon.

Show marker/icon

Just display marker.

HTML:

<div ngxPrintItemMarker>

Print after marker click

If you click the little printer print starts immediately.

HTML:

<div ngxPrintItemMarker directPrint=”true></div>

Directive ngxNoPrint

Use this directive to prevent a sub-item (child) to be printed.

Customization

You may use the custom class property to override the default class. Make sure that the CSS class can be viewed globally, such as placing it into “styles.css” You can also use the background-image property only to override the image. You can specify the data for the background-URL.

Event

You can listen to the event printClicked.

HTML:

<div id=”printDivMarkerngxPrintItemMarker (printClicked)=”printerMarkerClicked()>

<div id=”printDivMarkerngxPrintItemMarker customClass=”mymarker>

 

Counted among the best Angular development services offering company in India by Clutch and Good firms, we provide full-cycle development services to our esteemed customers. Visit our angular development service page to learn more.

Share this post