From 8c18247a2f6b0214c10bb3d66b325563b620d0cc Mon Sep 17 00:00:00 2001
From: "sergey.sokolov" <sergey.sokolov@behavox.com>
Date: Tue, 14 Nov 2017 13:31:00 +0300
Subject: [PATCH] Added a way to pass arbitrary data to templates. Removed
bypassSecurityTrustHtml for user-provided templates, its totally unsafe to
use it. Fixed class for html inserted via innerHTML (from sn-content to
sn-html)
---
README.md | 17 +++++++++++++++
.../notification/notification.component.html | 21 +++++++++++++------
.../notification/notification.component.ts | 9 +-------
3 files changed, 33 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index c22ff68..bbf7089 100644
--- a/README.md
+++ b/README.md
@@ -151,6 +151,23 @@ You could also pass the template through the `open()` method:
}
```
+You can pass arbitrary data to your template:
+```html
+<ng-template #example let-text="text">
+ <p>{{ text }}!</p>
+</ng-template>
+```
+```ts
+ @ViewChild('example') example: TemplateRef<any>;
+
+ open() {
+ this._service.success(this.example, null, {
+ templateData: {text: 'hi'},
+ });
+ }
+```
+
+
## Subscribing to clicks
If you are interested in the clicks that happen on a notification you have
the possibility to subscribe to a EventEmitter. The methods (success, error, alert, warn, info, warn, bare, create and html) from the
diff --git a/src/components/notification/notification.component.html b/src/components/notification/notification.component.html
index 641c644..1260287 100644
--- a/src/components/notification/notification.component.html
+++ b/src/components/notification/notification.component.html
@@ -17,30 +17,39 @@
<div *ngIf="!item.html">
<div class="sn-title" *ngIf="titleIsTemplate else regularTitle">
- <ng-container *ngTemplateOutlet="title"></ng-container>
+ <ng-template [ngTemplateOutlet]="item.title"
+ [ngTemplateOutletContext]="templateData"
+ >
+ </ng-template>
</div>
<ng-template #regularTitle>
- <div class="sn-title" [innerHTML]="title"></div>
+ <div class="sn-title" [innerHTML]="item.title"></div>
</ng-template>
<div class="sn-content" *ngIf="contentIsTemplate else regularContent">
- <ng-container *ngTemplateOutlet="content"></ng-container>
+ <ng-template [ngTemplateOutlet]="item.content"
+ [ngTemplateOutletContext]="templateData"
+ >
+ </ng-template>
</div>
<ng-template #regularContent>
- <div class="sn-content" [innerHTML]="content"></div>
+ <div class="sn-content" [innerHTML]="item.content"></div>
</ng-template>
<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>
</div>
<div *ngIf="item.html">
<div class="sn-html" *ngIf="htmlIsTemplate else regularHtml">
- <ng-container *ngTemplateOutlet="item.html"></ng-container>
+ <ng-template [ngTemplateOutlet]="item.html"
+ [ngTemplateOutletContext]="templateData"
+ >
+ </ng-template>
</div>
<ng-template #regularHtml>
- <div class="sn-content" [innerHTML]="item.html"></div>
+ <div class="sn-html" [innerHTML]="item.html"></div>
</ng-template>
<div class="icon" [class.icon-hover]="clickIconToClose" *ngIf="item.icon" [innerHTML]="safeSvg" (click)="onClickIcon($event)"></div>
diff --git a/src/components/notification/notification.component.ts b/src/components/notification/notification.component.ts
index adc0df7..eb9d29a 100644
--- a/src/components/notification/notification.component.ts
+++ b/src/components/notification/notification.component.ts
@@ -126,9 +126,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
// Progress bar variables
- public title: any;
- public content: any;
+ public templateData: any = null;
public titleIsTemplate = false;
public contentIsTemplate = false;
public htmlIsTemplate = false;
@@ -250,12 +249,6 @@ export class NotificationComponent implements OnInit, OnDestroy {
}
private contentType(item: any, key: string) {
- if (item instanceof TemplateRef) {
- this[key] = item;
- } else {
- this[key] = this.domSanitizer.bypassSecurityTrustHtml(item);
- }
-
this[key + 'IsTemplate'] = item instanceof TemplateRef;
}
}