Pass data to templates

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

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>

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;
   }
 }