diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..a34491a
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,4 @@
+# 1.1.0 (2018-12-04)
+### New features
+* Support styles (CSS) ([#5](https://github.com/selemxmn/ngx-print/issues/5)) ([71cefdf](https://github.com/selemxmn/ngx-print/commit/71cefdf))
+* Permit a dynamic title of printing window instead of the old static `Print tab` ([2098f3e](https://github.com/selemxmn/ngx-print/commit/2098f3e))
diff --git a/README.md b/README.md
index 9cc9aac..3d64730 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,47 @@ export class YourAppModule {
```
+## Optional properties
+
+- You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button `printTitle`:
+
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+
+- Also, if you want to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite styles to another attribute called `printStyle`:
+
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+Here some simple styles were added to every `h1` & `h2` tags within the `div` where `print-section` is tagged to its `id` attribute.
+
## TODO
* Disable the print button once the popped window is opened
* Write tests
diff --git a/package.json b/package.json
index f051c02..c5ef890 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ngx-print",
- "version": "1.0.3",
+ "version": "1.1.0",
"description": "Plug n' Play Angular (2++) directive to print your stuff",
"author": "https://github.com/selemxmn/ngx-print/graphs/contributors",
"repository": {
@@ -22,6 +22,11 @@
"dependency",
"angular-print"
],
+ "scripts": {
+ "ng": "ng",
+ "build": "ng build",
+ "test": "ng test"
+ },
"dependencies": {
"tslib": "^1.9.3"
},
diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts
index a86fa58..c6a12fa 100644
--- a/src/lib/ngx-print.directive.ts
+++ b/src/lib/ngx-print.directive.ts
@@ -1,12 +1,56 @@
import { Directive, HostListener, Input } from '@angular/core';
-
@Directive({
selector: 'button[ngxPrint]'
})
+
export class NgxPrintDirective {
+ private _printStyle = [];
+
+ /**
+ *
+ *
+ * @memberof NgxPrintDirective
+ */
@Input() printSectionId: string;
+ /**
+ *
+ *
+ * @memberof NgxPrintDirective
+ */
+ @Input() printTitle: string;
+
+ /**
+ *
+ *
+ * @memberof NgxPrintDirective
+ */
+ @Input()
+ set printStyle(values: {[key: string]: {[key: string]: string}}) {
+ for (var key in values) {
+ if (values.hasOwnProperty(key)) {
+ this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
+ }
+ }
+ this.returnStyleValues();
+ }
+
+/**
+ *
+ *
+ * @returns
+ * @memberof NgxPrintDirective
+ */
+private returnStyleValues() {
+ return this._printStyle.join(' ');
+ }
+
+ /**
+ *
+ *
+ * @memberof NgxPrintDirective
+ */
@HostListener('click', ['$event.target'])
public print(): void {
let printContents, popupWin;
@@ -16,7 +60,10 @@ export class NgxPrintDirective {
popupWin.document.write(`
- Print tab
+ ${this.printTitle ? this.printTitle : ''}
+
${printContents}
`