Install ngx-print
Install the ngx-printlibrary via npm:
npm i ngx-print
Import NgxPrintModule
Add the NgxPrintModule to your application. Open app.module.ts and update it as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgxPrintModule } from 'ngx-print'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, NgxPrintModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
4. Add a Basic Print Example
Now let’s add a simple example of creating print modal window in app.component.ts and app.component.html.
app.component.ts
Here we define sample typescript file
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; } |
app.component.html
Display avatars based on user data:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="demo"> <table border = "1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </div><br> <button printSectionId="demo" ngxPrint>print</button> |
FULL SOURCE CODE
