Angular CLI – Print From Your Angular App | DevstringxSantosh Singh
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:
Steps to Create Your First Application Using Angular CLI:
Step-1: Install Angular CLI
Step-2: Create a new project by this command
Choose yes for the routing option and, CSS or SCSS.
ng new myNewApp
Step-3: Go to your project directory
Step-4: Run the server and see your application in action
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 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.
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.
npm i ngx-printer
The easiest way to print an HTML Element is HTML:
You can also set this option in .forRoot while importing the module to the app.module
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).
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
Print div by id
Print image src/url directly
Print Angular TemplateRef or Component
Beware: To print a component, the service needs to know the component (copy 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
Event of the print window
You should subscribe to $printWindowOpen if you want to check whether the print window is open or not.
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.
Use the async pipe to subscribe and then call the function printPrintItem to print one item.
You can also print more than one item using the function printPrintItems(items to print, ?custom CSS class). 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.
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
• 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.
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.
Just display marker.
Print After Marker Click
If you click the little printer print starts immediately.
Directive Ngx NoPrint
Use this directive to prevent a sub-item (child) to be printed.
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.
You can listen to the event printClicked.