fix: remove <template> deprecation warning

BREAKING CHANGE: angular 4.0 or higher is now required to use this module. The
[upgrade](http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html) should be seamless
for most users

README.md

@@ -20,7 +20,7 @@ https://mattlewis92.github.io/angular-confirmation-popover/
 
 ## About
 
-A simple angular 2.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.
+A simple angular 4.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.
 
 Pull requests are welcome.
 

demo/index.html

@@ -19,7 +19,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <a class="navbar-brand" href="#">Angular 2.0+ Confirmation Popover</a>
+          <a class="navbar-brand" href="#">Angular 4.0+ Confirmation Popover</a>
         </div>
         <ul class="nav navbar-nav hidden-xs">
           <li><a href="#demo">Demo</a></li>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-confirmation-popover",
   "version": "2.1.3",
-  "description": "An angular 2.0+ bootstrap confirmation popover",
+  "description": "An angular 4.0+ bootstrap confirmation popover",
   "main": "./dist/umd/angular-confirmation-popover.js",
   "module": "./dist/esm/src/index.js",
   "typings": "./dist/esm/src/index.d.ts",
@@ -30,6 +30,7 @@
   "keywords": [
     "angular",
     "angular2",
+    "angular4",
     "bootstrap",
     "popover",
     "confirm",
@@ -91,8 +92,8 @@
     "zone.js": "^0.8.5"
   },
   "peerDependencies": {
-    "@angular/common": ">=2.0.0 <5.0.0",
-    "@angular/core": ">=2.0.0 <5.0.0"
+    "@angular/common": "^4.0.0",
+    "@angular/core": "^4.0.0"
   },
   "files": [
     "dist"

src/confirmationPopover.directive.ts

@@ -15,7 +15,7 @@ import {
   ComponentFactoryResolver,
   Injector,
   Inject,
-  Renderer,
+  Renderer2,
   TemplateRef,
   ComponentFactory
 } from '@angular/core';
@@ -170,7 +170,7 @@ export class ConfirmationPopover implements OnDestroy, OnChanges, OnInit {
     private defaultOptions: ConfirmationPopoverOptions,
     private cfr: ComponentFactoryResolver,
     private position: Positioning,
-    private renderer: Renderer,
+    private renderer: Renderer2,
     @Inject(DOCUMENT) private document //tslint:disable-line
   ) {}
 
@@ -295,7 +295,7 @@ export class ConfirmationPopover implements OnDestroy, OnChanges, OnInit {
       const childInjector: Injector = ReflectiveInjector.fromResolvedProviders(binding, contextInjector);
       this.popover = this.viewContainerRef.createComponent(componentFactory, this.viewContainerRef.length, childInjector);
       if (this.appendToBody) {
-        this.renderer.invokeElementMethod(this.document.body, 'appendChild', [this.popover.location.nativeElement]);
+        this.document.body.appendChild(this.popover.location.nativeElement);
       }
       this.isOpenChange.emit(true);
 
@@ -311,8 +311,8 @@ export class ConfirmationPopover implements OnDestroy, OnChanges, OnInit {
         this.placement || this.defaultOptions.placement,
         this.appendToBody || this.defaultOptions.appendToBody
       );
-      this.renderer.setElementStyle(popoverElement, 'top', `${popoverPosition.top}px`);
-      this.renderer.setElementStyle(popoverElement, 'left', `${popoverPosition.left}px`);
+      this.renderer.setStyle(popoverElement, 'top', `${popoverPosition.top}px`);
+      this.renderer.setStyle(popoverElement, 'left', `${popoverPosition.left}px`);
     }
   }
 

src/confirmationPopover.module.ts

@@ -1,12 +1,12 @@
-import {NgModule, ModuleWithProviders, OpaqueToken} from '@angular/core';
+import {NgModule, ModuleWithProviders, InjectionToken} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Positioning} from 'positioning';
 import {ConfirmationPopover} from './confirmationPopover.directive';
 import {ConfirmationPopoverWindow} from './confirmationPopoverWindow.component';
 import {Focus} from './focus.directive';
 import {ConfirmationPopoverOptions, ConfirmationPopoverOptionsInterface} from './confirmationPopoverOptions.provider';
 
-export const USER_OPTIONS: OpaqueToken = new OpaqueToken('confirmation popover user options');
+export const USER_OPTIONS: InjectionToken<string> = new InjectionToken('confirmation popover user options');
 
 export function optionsFactory(userOptions: ConfirmationPopoverOptions): ConfirmationPopoverOptions {
   const options: ConfirmationPopoverOptions = new ConfirmationPopoverOptions();

src/confirmationPopoverWindow.component.ts

@@ -14,7 +14,7 @@ import {ConfirmationPopoverWindowOptions} from './confirmationPopoverOptions.pro
     }
   `],
   template: `
-    <template #defaultTemplate let-options="options">
+    <ng-template #defaultTemplate let-options="options">
       <div [class]="'popover ' + options.placement + ' popover-' + options.placement + ' ' + options.popoverClass">
         <div class="popover-arrow arrow"></div>
         <h3 class="popover-title" [innerHTML]="options.title"></h3>
@@ -46,11 +46,11 @@ import {ConfirmationPopoverWindowOptions} from './confirmationPopoverOptions.pro
           </div>
         </div>
       </div>
-    </template>
-    <template
+    </ng-template>
+    <ng-template
       [ngTemplateOutlet]="options.customTemplate || defaultTemplate"
-      [ngOutletContext]="{options: options}">
-    </template>
+      [ngTemplateOutletContext]="{options: options}">
+    </ng-template>
   `
 })
 export class ConfirmationPopoverWindow implements AfterViewInit {

src/focus.directive.ts

@@ -17,11 +17,11 @@ export class Focus implements OnChanges {
 
   @Input() mwlFocus: boolean;
 
-  constructor(private renderer: Renderer, private elm: ElementRef) {}
+  constructor(private elm: ElementRef) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['mwlFocus'] && this.mwlFocus === true) {
-      this.renderer.invokeElementMethod(this.elm.nativeElement, 'focus', []);
+    if (changes.mwlFocus && this.mwlFocus === true) {
+      this.elm.nativeElement.focus();
     }
   }
 

test/angular-confirmation-popover.spec.ts

@@ -391,7 +391,7 @@ describe('bootstrap confirm', () => {
     it('should allow a custom template to be set', () => {
 
       const html: string = `
-        <template #customTemplate let-options="options">
+        <ng-template #customTemplate let-options="options">
           <div [class]="'popover ' + options.placement" style="display: block">
             <div class="arrow"></div>
             <h3 class="popover-title">{{ options.title }}</h3>
@@ -401,7 +401,7 @@ describe('bootstrap confirm', () => {
                <button [mwlFocus]="options.focusButton === 'confirm'">Confirm</button>
             </div>
           </div>
-        </template>
+        </ng-template>
         <button
           mwlConfirmationPopover
           title="My Title"