feat(tooltip): html content as template (#751)

* Adding tooltip html content as template reference

* Adding context for tooltip template

components/tooltip/readme.md

@@ -11,16 +11,19 @@ import { TOOLTIP_DIRECTIVES } from 'ng2-bootstrap/components/tooltip';
 @Directive({ selector: '[tooltip]' })
 export class TooltipDirective {
   @Input('tooltip') private content:string;
+  @Input('tooltipHtml') public htmlContent:string | TemplateRef<any>;
   @Input('tooltipPlacement') private placement:string = 'top';
   @Input('tooltipIsOpen') private isOpen:boolean;
   @Input('tooltipEnable') private enable:boolean;
   @Input('tooltipAppendToBody') private appendToBody:boolean;
   @Input('tooltipClass') public popupClass:string;
+  @Input('tooltipContext') public tooltipContext:any;
 }
 ```
 
 ### Tooltip properties
   - `tooltip` (`string`) - text of tooltip
+  - `tooltipHtml` (`string|TempalteRef`) - tooltip custom html content, defined as string or template reference
   - `tooltipPlacement` (`?string='top'`) - tooltip positioning instruction, supported positions: 'top', 'bottom', 'left', 'right'
   - `tooltipAnimation` (`?boolean=true`) - if `false` fade tooltip animation will be disabled
   - `tooltipPopupDelay` (*not implemented*) (`?numer=0`) - time in milliseconds before tooltip occurs
@@ -29,3 +32,4 @@ export class TooltipDirective {
   - `tooltipAppendToBody` (*not implemented*) (`?boolean=false`) - if `true` tooltip will be appended to body
   - `tooltipClass` (`?string`) - custom tooltip class applied to the tooltip container
   - `tooltipIsOpen` (`?boolean=false`) - if `true` tooltip is currently visible
+  - `tooltipContext` (`any`) - if a template is used for the content, then this property can be used to specify a context for that template. The template variable exposed is called 'model'.

components/tooltip/tooltip-container.component.ts

@@ -1,5 +1,5 @@
 import {
-  Component, ChangeDetectorRef, ElementRef, Inject, AfterViewInit
+  Component, ChangeDetectorRef, ElementRef, Inject, AfterViewInit, TemplateRef
 } from '@angular/core';
 import {NgClass, NgStyle} from '@angular/common';
 import {positionService} from '../position';
@@ -14,9 +14,15 @@ import {TooltipOptions} from './tooltip-options.class';
      [ngClass]="classMap">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner"
-           *ngIf="htmlContent" 
+           *ngIf="htmlContent && !isTemplate" 
            innerHtml="{{htmlContent}}">
       </div>
+      <div class="tooltip-inner"
+           *ngIf="htmlContent && isTemplate">
+        <template [ngTemplateOutlet]="htmlContent"
+                  [ngOutletContext]="{model: context}">
+        </template>
+      </div>
       <div class="tooltip-inner"
            *ngIf="content">
         {{content}}
@@ -30,13 +36,14 @@ export class TooltipContainerComponent implements AfterViewInit {
   private left:string = '-1000px';
   private display:string = 'block';
   private content:string;
-  private htmlContent:string;
+  private htmlContent:string | TemplateRef<any>;
   private placement:string;
   private popupClass:string;
   private animation:boolean;
   private isOpen:boolean;
   private appendToBody:boolean;
   private hostEl:ElementRef;
+  private context:any;
   /* tslint:enable */
 
   private element:ElementRef;
@@ -72,4 +79,8 @@ export class TooltipContainerComponent implements AfterViewInit {
 
     this.cdr.detectChanges();
   }
+
+  public get isTemplate():boolean {
+    return this.htmlContent instanceof TemplateRef;
+  }
 }

components/tooltip/tooltip-options.class.ts

@@ -7,7 +7,8 @@ export class TooltipOptions {
   public animation:boolean;
   public isOpen:boolean;
   public content:string;
-  public htmlContent:string;
+  public htmlContent:any;
+  public context:any;
 
   public constructor(options:Object) {
     Object.assign(this, options);

components/tooltip/tooltip.directive.ts

@@ -1,6 +1,6 @@
 import {
   Directive, Input, HostListener, DynamicComponentLoader,
-  ComponentRef, Provider, ReflectiveInjector, ViewContainerRef
+  ComponentRef, Provider, ReflectiveInjector, ViewContainerRef, TemplateRef
 } from '@angular/core';
 import {TooltipOptions} from './tooltip-options.class';
 import {TooltipContainerComponent} from './tooltip-container.component';
@@ -11,13 +11,14 @@ import {TooltipContainerComponent} from './tooltip-container.component';
 export class TooltipDirective {
   /* tslint:disable */
   @Input('tooltip') public content:string;
-  @Input('tooltipHtml') public htmlContent:string;
+  @Input('tooltipHtml') public htmlContent:string | TemplateRef<any>;
   @Input('tooltipPlacement') public placement:string = 'top';
   @Input('tooltipIsOpen') public isOpen:boolean;
   @Input('tooltipEnable') public enable:boolean = true;
   @Input('tooltipAnimation') public animation:boolean = true;
   @Input('tooltipAppendToBody') public appendToBody:boolean;
   @Input('tooltipClass') public popupClass:string;
+  @Input('tooltipContext') public tooltipContext:any;
   /* tslint:enable */
 
   public viewContainerRef:ViewContainerRef;
@@ -46,7 +47,8 @@ export class TooltipDirective {
       placement: this.placement,
       animation: this.animation,
       hostEl: this.viewContainerRef.element,
-      popupClass: this.popupClass
+      popupClass: this.popupClass,
+      context: this.tooltipContext
     });
 
     let binding = ReflectiveInjector.resolve([

demo/components/tooltip/tooltip-demo.html

@@ -26,6 +26,15 @@
   I can even contain HTML. <a href="#" [tooltipHtml]="htmlTooltip">Check me out!</a>
 </p>
 
+<template #toolTipTemplate let-model="model">
+  <h4>Tool tip custom content defined inside a template</h4>
+  <h5>With context binding: {{model.text}}</h5>
+</template>
+
+<p>
+  Or use a TemplateRef. <a href="#" [tooltipHtml]="toolTipTemplate" [tooltipContext]="tooltipModel">Check me out!</a>
+<p>
+
 <p>
   I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltipClass="customClass">Check me out!</a>
 </p>

demo/components/tooltip/tooltip-demo.ts

@@ -16,4 +16,5 @@ export class TooltipDemoComponent {
   public dynamicTooltip:string = 'Hello, World!';
   public dynamicTooltipText:string = 'dynamic';
   public htmlTooltip:string = 'I\'ve been made <b>bold</b>!';
+  public tooltipModel:any = { text: 'foo', index: 1 };
 }