Angular & Angular CLI Setup

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 web pack comes into the picture. There are also so many configuration files that you would need to run & setup 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 with this command

Choose yes for the 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 components or templates. You can print by opening a new window/tab or using the current window. You may also use a directive to mark and store an HTML element. Maybe 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 print preview only = 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();

• 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 component in angular, the service needs to know the component (copy the source and add it to the entry component of the 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(items to print, ?custom CSS class). The items will print 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 to. You should make use of

• Id of the printItem from the list
• Class name (className=”ABC”) of an HTML element
• Id of an HTML element (divID = “”) of an HTML element
• 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 a to the top left of the HTML element a little printer icon.

• Show Marker/Icon

Just display the marker.

• HTML

<div ngxPrintItemMarker>

• Print After Marker Click

If you click the little printer print starts immediately.

• HTML

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

• Directive Ngx NoPrint

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

Customization

You may use the custom class property to override the default class. Make sure that the CSS class can view 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="printDivMarker" ngxPrintItemMarker (printClicked)="printerMarkerClicked()">
<div id="printDivMarker" ngxPrintItemMarker customClass="mymarker" >

If you are interested in even more development-related articles and information from us here at Devstringx, then we have a lot to choose from for you.