ngx-print

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #machine-learning #deep-learning #linux #docker #macos #java #awesome #kubernetes #open-source

(★ 175)

:printer: A plug n' play Angular (2++) library to print your stuff

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- - PullRequest.yml
  - stale.yml
- dependabot.yml
- - tsconfig.app.json
  - tsconfig.spec.json
- - ngx-print.base.ts
  - ngx-print.directive.spec.ts
  - ngx-print.directive.ts
  - ngx-print.module.ts
  - ngx-print.service.spec.ts
  - ngx-print.service.ts
  - print-options.ts
- public_api.ts
.editorconfig
.eslintrc.json
.gitignore
.prettierignore
.prettierrc.json
_config.yml
angular.json
CHANGELOG.md
eslint.config.js
LICENSE
ng-package.json
package-lock.json
package.json
README.md
tsconfig.json
tsconfig.lib.json
tsconfig.spec.json
tslint.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![](https://badgen.net/npm/dt/ngx-print)](https://www.npmjs.com/package/ngx-print) [![](https://travis-ci.org/selemxmn/ngx-print.svg?branch=master)](https://travis-ci.org/selemxmn/ngx-print) [![Coverage Status](https://coveralls.io/repos/github/selemxmn/ngx-print/badge.svg?branch=unit-tests)](https://coveralls.io/github/selemxmn/ngx-print?branch=unit-tests)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/i7vymeqf-anasgtzf?file=src%2Fmain.ts)

# ngx-print : *plug n' play Angular directive to print your stuff*
This directive makes printing your HTML sections smooth and easy in your Angular application. It is inspired from the old [AngularJS ngPrint](https://github.com/gilf/ngPrint) directive.
***Enjoy! Contributions are so welcomed :)***

## Dependencies

| ngx-print | Angular        |
| --------- | -------------- |
| 1.2.1     | 7.0.0 - 14.1.0 |
| 1.3.x     | 15.0.0         |
| 1.4.x     | 16.0.0         |
| 1.5.x     | 17.0.0         |
| 2.x.x     | 18.0.0         |
| 3.x.x     | 19.0.0         |
| 20.x.x    | 20.0.0         |
| 21.x.x    | 21.0.0         |
| 22.x.x    | 22.0.0         |

## Version Alignment Notice

Starting with version 20.0.0, this package aligns its major version with the Angular framework version for better
clarity and compatibility tracking. Version 20 is intended for Angular 20 and so on.

## Setup

**1-** In your root application folder run:

```bash
$ npm install ngx-print
```

**2-** Once `ngx-print` is installed, you need to import the directive `NgxPrintDirective`:

```ts
import { NgxPrintDirective } from 'ngx-print';

@Component({
  ...
  imports: [NgxPrintDirective]
  ...
})
export class PrintExampleComponent {}
```

**3-** Then plug n' play with it:

- Assuming you want to print the following HTML section:

```html
<div>
  
</div>
<button>print</button> 
```

- Now, what you have to do is tagging your *wanted-to-print* section by an `id` attribute, then link that `id` to a directive parameter in your button:

```html
 
<div id="print-section"> 
  
</div>

<button printSectionId="print-section" ngxPrint>print</button> 
```

## Optional properties

- You want a customized title for your printing window? Add `printTitle`: