chore(templates): import required directives for ionic templates

src/components/action-sheet/action-sheet-component.ts

@@ -1,8 +1,11 @@
 import { Component, Renderer, ElementRef, HostListener, ViewEncapsulation } from '@angular/core';
+import { NgClass, NgFor, NgIf } from '@angular/common';
 
 import { Animation } from '../../animations/animation';
+import { Backdrop } from '../backdrop/backdrop';
 import { Config } from '../../config/config';
 import { Form } from '../../util/form';
+import { Icon } from '../icon/icon';
 import { Key } from '../../util/key';
 import { NavParams } from '../nav/nav-params';
 import { Transition, TransitionOptions } from '../../transitions/transition';
@@ -35,6 +38,7 @@ import { ViewController } from '../nav/view-controller';
       </div>
     </div>
     `,
+  directives: [Backdrop, Icon, NgClass, NgFor, NgIf],
   host: {
     'role': 'dialog',
     '[attr.aria-labelledby]': 'hdrId',

src/components/alert/alert-component.ts

@@ -1,6 +1,9 @@
-import {Component, ElementRef, Renderer, HostListener, ViewEncapsulation} from '@angular/core';
+import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
+import { NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { NgModel } from '@angular/forms';
 
 import { Animation } from '../../animations/animation';
+import { Backdrop } from '../backdrop/backdrop';
 import { Config } from '../../config/config';
 import { isPresent } from '../../util/util';
 import { Key } from '../../util/key';
@@ -62,6 +65,7 @@ import {ViewController} from '../nav/view-controller';
       </div>
     </div>
     `,
+  directives: [Backdrop, NgClass, NgFor, NgIf, NgModel, NgSwitch, NgSwitchCase, NgSwitchDefault],
   host: {
     'role': 'dialog',
     '[attr.aria-labelledby]': 'hdrId',

src/components/button/button.ts

@@ -35,11 +35,8 @@ import {isTrueProperty} from '../../util/util';
  */
 @Component({
   selector: 'button:not([ion-item]),[button]',
-  template:
+  // NOTE: template must not contain spaces between elements
-    '<span class="button-inner">' +
+  template: '<span class="button-inner"><ng-content></ng-content></span><ion-button-effect></ion-button-effect>',
-      '<ng-content></ng-content>' +
-    '</span>' +
-    '<ion-button-effect></ion-button-effect>',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })

src/components/checkbox/checkbox.ts

@@ -5,7 +5,7 @@ import { Form } from '../../util/form';
 import { Item } from '../item/item';
 import { isTrueProperty } from '../../util/util';
 
-const CHECKBOX_VALUE_ACCESSOR = new Provider(
+export const CHECKBOX_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Checkbox), multi: true});
 
 
@@ -49,19 +49,20 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
  */
 @Component({
   selector: 'ion-checkbox',
-  template:
+  template: `
-    '<div class="checkbox-icon" [class.checkbox-checked]="_checked">' +
+    <div class="checkbox-icon" [class.checkbox-checked]="_checked">
-      '<div class="checkbox-inner"></div>' +
+      <div class="checkbox-inner"></div>
-    '</div>' +
+    </div>
-    '<button role="checkbox" ' +
+    <button role="checkbox"
-            'type="button" ' +
+            type="button"
-            'category="item-cover" ' +
+            category="item-cover"
-            '[id]="id" ' +
+            [id]="id"
-            '[attr.aria-checked]="_checked" ' +
+            [attr.aria-checked]="_checked"
-            '[attr.aria-labelledby]="_labelId" ' +
+            [attr.aria-labelledby]="_labelId"
-            '[attr.aria-disabled]="_disabled" ' +
+            [attr.aria-disabled]="_disabled"
-            'class="item-cover">' +
+            class="item-cover">
-    '</button>',
+    </button>
+  `,
   host: {
     '[class.checkbox-disabled]': '_disabled'
   },

src/components/datetime/datetime.ts

@@ -10,7 +10,7 @@ import { merge, isBlank, isPresent, isTrueProperty, isArray, isString } from '..
 import { dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData } from '../../util/datetime-util';
 import { NavController } from '../nav/nav-controller';
 
-const DATETIME_VALUE_ACCESSOR = new Provider(
+export const DATETIME_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateTime), multi: true});
 
 
@@ -248,16 +248,17 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
  */
 @Component({
   selector: 'ion-datetime',
-  template:
+  template: `
-    '<div class="datetime-text">{{_text}}</div>' +
+    <div class="datetime-text">{{_text}}</div>
-    '<button aria-haspopup="true" ' +
+    <button aria-haspopup="true"
-            'type="button" ' +
+            type="button"
-            '[id]="id" ' +
+            [id]="id"
-            'category="item-cover" ' +
+            category="item-cover"
-            '[attr.aria-labelledby]="_labelId" ' +
+            [attr.aria-labelledby]="_labelId"
-            '[attr.aria-disabled]="_disabled" ' +
+            [attr.aria-disabled]="_disabled"
-            'class="item-cover">' +
+            class="item-cover">
-    '</button>',
+    </button>
+  `,
   host: {
     '[class.datetime-disabled]': '_disabled'
   },

src/components/infinite-scroll/infinite-scroll-content.ts

@@ -1,7 +1,9 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { NgIf } from '@angular/common';
 
 import { Config } from '../../config/config';
 import { InfiniteScroll } from './infinite-scroll';
+import { Spinner } from '../spinner/spinner';
 
 
 /**
@@ -16,6 +18,7 @@ import { InfiniteScroll } from './infinite-scroll';
       '</div>' +
       '<div class="infinite-loading-text" [innerHTML]="loadingText" *ngIf="loadingText"></div>' +
     '</div>',
+  directives: [NgIf, Spinner],
   host: {
     '[attr.state]': 'inf.state'
   },

src/components/input/input.ts

@@ -1,5 +1,6 @@
 import { Component, Optional, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { NgControl, NgModel } from '@angular/forms';
 
 import { App } from '../app/app';
 import { Config } from '../../config/config';
@@ -74,15 +75,13 @@ import { Platform } from '../../platform/platform';
  */
 @Component({
   selector: 'ion-input',
-  template:
+  template: `
-    '<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' +
+    <input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">
-    '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
+    <input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">
-    '<button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
+    <button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>
-    '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
+    <div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>
-  directives: [
+  `,
-    NextInput,
+  directives: [NativeInput, NextInput, NgIf, NgModel],
-    NativeInput,
-  ],
   encapsulation: ViewEncapsulation.None,
 })
 export class TextInput extends InputBase {
@@ -170,10 +169,7 @@ export class TextInput extends InputBase {
     '<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input"></textarea>' +
     '<input type="text" aria-hidden="true" next-input *ngIf="_useAssist">' +
     '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
-  directives: [
+  directives: [NativeInput, NextInput, NgIf],
-    NextInput,
-    NativeInput
-  ],
   encapsulation: ViewEncapsulation.None,
 })
 export class TextArea extends InputBase {

src/components/item/item-sliding.ts

@@ -178,9 +178,10 @@ const enum SlidingState {
  */
 @Component({
   selector: 'ion-item-sliding',
-  template:
+  template: `
-    '<ng-content select="ion-item,[ion-item]"></ng-content>' +
+    <ng-content select="ion-item,[ion-item]"></ng-content>
-    '<ng-content select="ion-item-options"></ng-content>',
+    <ng-content select="ion-item-options"></ng-content>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })

src/components/item/item.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, forwardRef, Input, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NgIf } from '@angular/common';
 
 import { Button } from '../button/button';
 import { Form } from '../../util/form';
@@ -267,21 +268,22 @@ import { Label } from '../label/label';
  */
 @Component({
   selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider',
-  template:
+  template: `
-    '<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>' +
+    <ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>
-    '<div class="item-inner">' +
+    <div class="item-inner">
-      '<div class="input-wrapper">' +
+      <div class="input-wrapper">
-        '<ng-content select="ion-label"></ng-content>' +
+        <ng-content select="ion-label"></ng-content>
-        '<ion-label *ngIf="_viewLabel">' +
+        <ion-label *ngIf="_viewLabel">
-          '<ng-content></ng-content>' +
+          <ng-content></ng-content>
-        '</ion-label>' +
+        </ion-label>
-        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
+        <ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>
-      '</div>' +
+      </div>
-      '<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
+      <ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>
-      '<ion-reorder></ion-reorder>' +
+      <ion-reorder></ion-reorder>
-    '</div>' +
+    </div>
-    '<ion-button-effect></ion-button-effect>',
+    <ion-button-effect></ion-button-effect>
-  directives: [forwardRef(() => Reorder)],
+  `,
+  directives: [NgIf, Label, forwardRef(() => Reorder)],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })

src/components/loading/loading-component.ts

@@ -1,9 +1,12 @@
 import { Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
+import { NgIf } from '@angular/common';
 
 import { Animation } from '../../animations/animation';
+import { Backdrop } from '../backdrop/backdrop';
 import { Config } from '../../config/config';
 import { isDefined, isPresent, isUndefined } from '../../util/util';
 import { NavParams } from '../nav/nav-params';
+import { Spinner } from '../spinner/spinner';
 import { Transition, TransitionOptions } from '../../transitions/transition';
 import { ViewController} from '../nav/view-controller';
 
@@ -13,14 +16,16 @@ import { ViewController} from '../nav/view-controller';
 */
 @Component({
   selector: 'ion-loading',
-  template:
+  template: `
-    '<ion-backdrop [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>' +
+    <ion-backdrop [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>
-    '<div class="loading-wrapper">' +
+    <div class="loading-wrapper">
-      '<div *ngIf="showSpinner" class="loading-spinner">' +
+      <div *ngIf="showSpinner" class="loading-spinner">
-        '<ion-spinner [name]="d.spinner"></ion-spinner>' +
+        <ion-spinner [name]="d.spinner"></ion-spinner>
-      '</div>' +
+      </div>
-      '<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
+      <div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>
-    '</div>',
+    </div>
+  `,
+  directives: [Backdrop, NgIf, Spinner],
   host: {
     'role': 'dialog'
   },

src/components/menu/menu.ts

@@ -179,9 +179,11 @@ import { Platform } from '../../platform/platform';
   host: {
     'role': 'navigation'
   },
-  template:
+  template: `
-    '<ng-content></ng-content>' +
+    <ng-content></ng-content>
-    '<ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>',
+    <ion-backdrop (click)="bdClick($event)" disableScroll="false"></ion-backdrop>
+  `,
+  directives: [Backdrop],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
@@ -281,17 +283,17 @@ export class Menu extends Ion {
   /**
    * @output {event} When the menu is being dragged open.
    */
-  @Output() ionDrag: EventEmitter<number> = new EventEmitter();
+  @Output() ionDrag: EventEmitter<number> = new EventEmitter<number>();
 
   /**
    * @output {event} When the menu has been opened.
    */
-  @Output() ionOpen: EventEmitter<boolean> = new EventEmitter();
+  @Output() ionOpen: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /**
    * @output {event} When the menu has been closed.
    */
-  @Output() ionClose: EventEmitter<boolean> = new EventEmitter();
+  @Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   constructor(
     private _menuCtrl: MenuController,

src/components/modal/modal-component.ts

@@ -2,9 +2,10 @@ import { Component, ComponentResolver, HostListener, Renderer, ViewChild, ViewCo
 
 import { addSelector } from '../../config/bootstrap';
 import { Animation } from '../../animations/animation';
-import { pascalCaseToDashCase } from '../../util/util';
+import { Backdrop } from '../backdrop/backdrop';
 import { Key } from '../../util/key';
 import { NavParams } from '../nav/nav-params';
+import { pascalCaseToDashCase } from '../../util/util';
 import { PageTransition } from '../../transitions/page-transition';
 import { TransitionOptions } from '../../transitions/transition';
 import { ViewController } from '../nav/view-controller';
@@ -21,7 +22,8 @@ import { windowDimensions } from '../../util/dom';
     <div class="modal-wrapper">
       <div #viewport nav-viewport></div>
     </div>
-  `
+  `,
+  directives: [Backdrop]
 })
 export class ModalCmp {
 

src/components/navbar/navbar.ts

@@ -2,6 +2,7 @@ import { Component, Directive, ElementRef, forwardRef, Inject, Input, Optional }
 
 import { App } from '../app/app';
 import { Config } from '../../config/config';
+import { Icon } from '../icon/icon';
 import { Ion } from '../ion';
 import { isTrueProperty } from '../../util/util';
 import { NavController } from '../nav/nav-controller';
@@ -94,28 +95,29 @@ class ToolbarBackground {
  */
 @Component({
   selector: 'ion-navbar',
-  template:
+  template: `
-    '<div class="toolbar-background"></div>' +
+    <div class="toolbar-background"></div>
-    '<button category="bar-button" class="back-button" [hidden]="_hideBb">' +
+    <button category="bar-button" class="back-button" [hidden]="_hideBb">
-      '<span class="button-inner">' +
+      <span class="button-inner">
-        '<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
+        <ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>
-        '<span class="back-button-text">' +
+        <span class="back-button-text">
-          '<span class="back-default">{{_bbText}}</span>' +
+          <span class="back-default">{{_bbText}}</span>
-        '</span>' +
+        </span>
-      '</span>' +
+      </span>
-    '</button>' +
+    </button>
-    '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
+    <ng-content select="[menuToggle],ion-buttons[left]"></ng-content>
-    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    <ng-content select="ion-buttons[start]"></ng-content>
-    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
+    <ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>
-    '<div class="toolbar-content">' +
+    <div class="toolbar-content">
-      '<ng-content></ng-content>' +
+      <ng-content></ng-content>
-    '</div>',
+    </div>
+  `,
+  directives: [BackButton, BackButtonText, Icon, ToolbarBackground],
   host: {
     '[hidden]': '_hidden',
     'class': 'toolbar',
     '[class.statusbar-padding]': '_sbPadding'
-  },
+  }
-  directives: [BackButton, BackButtonText, ToolbarBackground]
 })
 export class Navbar extends ToolbarBase {
   private _bbIcon: string;

src/components/picker/picker-component.ts

@@ -1,7 +1,9 @@
 import { Component, ElementRef, EventEmitter, Input, HostListener, Output, QueryList, Renderer, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NgClass, NgFor, NgIf } from '@angular/common';
 import { DomSanitizationService } from '@angular/platform-browser';
 
 import { Animation } from '../../animations/animation';
+import { Backdrop } from '../backdrop/backdrop';
 import { cancelRaf, pointerCoord, raf } from '../../util/dom';
 import { clamp, isNumber, isPresent, isString } from '../../util/util';
 import { Config } from '../../config/config';
@@ -28,6 +30,7 @@ import { ViewController } from '../nav/view-controller';
     </div>
     <div *ngIf="col.suffix" class="picker-suffix" [style.width]="col.suffixWidth">{{col.suffix}}</div>
   `,
+  directives: [NgFor, NgIf],
   host: {
     '[style.min-width]': 'col.columnWidth',
     '[class.picker-opts-left]': 'col.align=="left"',
@@ -363,10 +366,10 @@ export class PickerColumnCmp {
       </div>
     </div>
   `,
+  directives: [Backdrop, NgClass, NgFor, PickerColumnCmp],
   host: {
     'role': 'dialog'
   },
-  directives: [PickerColumnCmp],
   encapsulation: ViewEncapsulation.None,
 })
 export class PickerCmp {

src/components/popover/popover-component.ts

@@ -2,6 +2,7 @@ import { Component, ComponentResolver, ElementRef, HostListener, Renderer, ViewC
 
 import { addSelector } from '../../config/bootstrap';
 import { Animation } from '../../animations/animation';
+import { Backdrop } from '../backdrop/backdrop';
 import { Config } from '../../config/config';
 import { CSS, nativeRaf } from '../../util/dom';
 import { isPresent, pascalCaseToDashCase } from '../../util/util';
@@ -27,7 +28,8 @@ import { ViewController } from '../nav/view-controller';
         </div>
       </div>
     </div>
-  `
+  `,
+  directives: [Backdrop]
 })
 export class PopoverCmp {
   @ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef;

src/components/radio/radio-button.ts

@@ -43,19 +43,20 @@ import { RadioGroup } from './radio-group';
  */
 @Component({
   selector: 'ion-radio',
-  template:
+  template: `
-    '<div class="radio-icon" [class.radio-checked]="_checked">' +
+    <div class="radio-icon" [class.radio-checked]="_checked">
-      '<div class="radio-inner"></div>' +
+      <div class="radio-inner"></div>
-    '</div>' +
+    </div>
-    '<button role="radio" ' +
+    <button role="radio"
-            'type="button" ' +
+            type="button"
-            'category="item-cover" ' +
+            category="item-cover"
-            '[id]="id" ' +
+            [id]="id"
-            '[attr.aria-checked]="_checked" ' +
+            [attr.aria-checked]="_checked"
-            '[attr.aria-labelledby]="_labelId" ' +
+            [attr.aria-labelledby]="_labelId"
-            '[attr.aria-disabled]="_disabled" ' +
+            [attr.aria-disabled]="_disabled"
-            'class="item-cover">' +
+            class="item-cover">
-    '</button>',
+    </button>
+  `,
   host: {
     '[class.radio-disabled]': '_disabled'
   },

src/components/radio/radio-group.ts

@@ -5,7 +5,7 @@ import { ListHeader } from '../list/list';
 import { isCheckedProperty } from '../../util/util';
 import { RadioButton } from './radio-button';
 
-const RADIO_VALUE_ACCESSOR = new Provider(
+export const RADIO_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => RadioGroup), multi: true});
 
 /**

src/components/range/range.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, forwardRef, Input, Inject, OnDestroy, OnInit, Optional, Output, Provider, QueryList, Renderer, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { clamp, isNumber, isPresent, isString, isTrueProperty } from '../../util/util';
@@ -9,7 +10,7 @@ import { Item } from '../item/item';
 import { UIEventManager } from '../../util/ui-event-manager';
 
 
-const RANGE_VALUE_ACCESSOR = new Provider(
+export const RANGE_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Range), multi: true});
 
 /**
@@ -17,9 +18,11 @@ const RANGE_VALUE_ACCESSOR = new Provider(
  */
 @Component({
   selector: '.range-knob-handle',
-  template:
+  template: `
-    '<div class="range-pin" *ngIf="range.pin">{{_val}}</div>' +
+    <div class="range-pin" *ngIf="range.pin">{{_val}}</div>
-    '<div class="range-knob"></div>',
+    <div class="range-knob"></div>
+  `,
+  directives: [NgIf],
   host: {
     '[class.range-knob-pressed]': 'pressed',
     '[class.range-knob-min]': '_val===range.min',
@@ -176,22 +179,23 @@ export class RangeKnob implements OnInit {
  */
 @Component({
   selector: 'ion-range',
-  template:
+  template: `
-    '<ng-content select="[range-left]"></ng-content>' +
+    <ng-content select="[range-left]"></ng-content>
-    '<div class="range-slider" #slider>' +
+    <div class="range-slider" #slider>
-      '<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>' +
+      <div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>
-      '<div class="range-bar"></div>' +
+      <div class="range-bar"></div>
-      '<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>' +
+      <div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>
-      '<div class="range-knob-handle"></div>' +
+      <div class="range-knob-handle"></div>
-      '<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>' +
+      <div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>
-    '</div>' +
+    </div>
-    '<ng-content select="[range-right]"></ng-content>',
+    <ng-content select="[range-right]"></ng-content>
+  `,
+  directives: [NgFor, NgIf, RangeKnob],
   host: {
     '[class.range-disabled]': '_disabled',
     '[class.range-pressed]': '_pressed',
     '[class.range-has-pin]': '_pin'
   },
-  directives: [RangeKnob],
   providers: [RANGE_VALUE_ACCESSOR],
   encapsulation: ViewEncapsulation.None,
 })

src/components/refresher/refresher-content.ts

@@ -1,7 +1,10 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { NgIf } from '@angular/common';
 
 import { Config } from '../../config/config';
+import { Icon } from '../icon/icon';
 import { Refresher } from './refresher';
+import { Spinner } from '../spinner/spinner';
 
 
 /**
@@ -9,19 +12,21 @@ import { Refresher } from './refresher';
  */
 @Component({
   selector: 'ion-refresher-content',
-  template:
+  template: `
-    '<div class="refresher-pulling">' +
+    <div class="refresher-pulling">
-      '<div class="refresher-pulling-icon" *ngIf="pullingIcon">' +
+      <div class="refresher-pulling-icon" *ngIf="pullingIcon">
-        '<ion-icon [name]="pullingIcon"></ion-icon>' +
+        <ion-icon [name]="pullingIcon"></ion-icon>
-      '</div>' +
+      </div>
-      '<div class="refresher-pulling-text" [innerHTML]="pullingText" *ngIf="pullingText"></div>' +
+      <div class="refresher-pulling-text" [innerHTML]="pullingText" *ngIf="pullingText"></div>
-    '</div>' +
+    </div>
-    '<div class="refresher-refreshing">' +
+    <div class="refresher-refreshing">
-      '<div class="refresher-refreshing-icon">' +
+      <div class="refresher-refreshing-icon">
-        '<ion-spinner [name]="refreshingSpinner"></ion-spinner>' +
+        <ion-spinner [name]="refreshingSpinner"></ion-spinner>
-      '</div>' +
+      </div>
-      '<div class="refresher-refreshing-text" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>' +
+      <div class="refresher-refreshing-text" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>
-    '</div>',
+    </div>
+  `,
+  directives: [Icon, NgIf, Spinner],
   host: {
     '[attr.state]': 'r.state'
   },

src/components/searchbar/searchbar.ts

@@ -1,7 +1,8 @@
 import { Component, Directive, ElementRef, EventEmitter, HostBinding, Input, Optional, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NgControl} from '@angular/forms';
+import { NgControl, NgModel }  from '@angular/forms';
 
 import { Config } from '../../config/config';
+import { Icon } from '../icon/icon';
 import { isPresent } from '../../util/util';
 import { Debouncer } from '../../util/debouncer';
 
@@ -27,12 +28,6 @@ import { Debouncer } from '../../util/debouncer';
  */
 @Component({
   selector: 'ion-searchbar',
-  host: {
-    '[class.searchbar-has-value]': '_value',
-    '[class.searchbar-active]': '_isActive',
-    '[class.searchbar-show-cancel]': 'showCancelButton',
-    '[class.searchbar-left-aligned]': 'shouldAlignLeft()'
-  },
   template:
     '<div class="searchbar-input-container">' +
       '<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear dark class="searchbar-md-cancel">' +
@@ -43,6 +38,13 @@ import { Debouncer } from '../../util/debouncer';
       '<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
     '</div>' +
     '<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+  directives: [Icon, NgModel],
+  host: {
+    '[class.searchbar-has-value]': '_value',
+    '[class.searchbar-active]': '_isActive',
+    '[class.searchbar-show-cancel]': 'showCancelButton',
+    '[class.searchbar-left-aligned]': 'shouldAlignLeft()'
+  },
   encapsulation: ViewEncapsulation.None
 })
 export class Searchbar {

src/components/segment/segment.ts

@@ -42,9 +42,10 @@ import { isPresent, isTrueProperty } from '../../util/util';
  */
 @Component({
   selector: 'ion-segment-button',
-  template:
+  template: `
-    '<ng-content></ng-content>' +
+    <ng-content></ng-content>
-    '<ion-button-effect></ion-button-effect>',
+    <ion-button-effect></ion-button-effect>
+  `,
   host: {
     'tappable': '',
     'class': 'segment-button',

src/components/select/select.ts

@@ -1,4 +1,5 @@
 import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, HostListener, OnDestroy, Optional, Output, Provider, Renderer, QueryList, ViewEncapsulation } from '@angular/core';
+import { NgIf } from '@angular/common';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ActionSheet } from '../action-sheet/action-sheet';
@@ -10,7 +11,7 @@ import { Item } from '../item/item';
 import { NavController } from '../nav/nav-controller';
 import { Option } from '../option/option';
 
-const SELECT_VALUE_ACCESSOR = new Provider(
+export const SELECT_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Select), multi: true});
 
 
@@ -116,19 +117,21 @@ const SELECT_VALUE_ACCESSOR = new Provider(
  */
 @Component({
   selector: 'ion-select',
-  template:
+  template: `
-    '<div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>' +
+    <div *ngIf="!_text" class="select-placeholder select-text">{{placeholder}}</div>
-    '<div *ngIf="_text" class="select-text">{{_text}}</div>' +
+    <div *ngIf="_text" class="select-text">{{_text}}</div>
-    '<div class="select-icon">' +
+    <div class="select-icon">
-      '<div class="select-icon-inner"></div>' +
+      <div class="select-icon-inner"></div>
-    '</div>' +
+    </div>
-    '<button aria-haspopup="true" ' +
+    <button aria-haspopup="true"
-            '[id]="id" ' +
+            [id]="id"
-            'category="item-cover" ' +
+            category="item-cover"
-            '[attr.aria-labelledby]="_labelId" ' +
+            [attr.aria-labelledby]="_labelId"
-            '[attr.aria-disabled]="_disabled" ' +
+            [attr.aria-disabled]="_disabled"
-            'class="item-cover">' +
+            class="item-cover">
-    '</button>',
+    </button>
+  `,
+  directives: [NgIf],
   host: {
     '[class.select-disabled]': '_disabled'
   },

src/components/spinner/spinner.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { NgFor, NgStyle } from '@angular/common';
 
 import { Config } from '../../config/config';
 
@@ -97,13 +98,15 @@ import { Config } from '../../config/config';
  */
 @Component({
   selector: 'ion-spinner',
-  template:
+  template: `
-    '<svg viewBox="0 0 64 64" *ngFor="let i of _c" [ngStyle]="i.style">' +
+    <svg viewBox="0 0 64 64" *ngFor="let i of _c" [ngStyle]="i.style">
-     '<circle [attr.r]="i.r" transform="translate(32,32)"></circle>' +
+     <circle [attr.r]="i.r" transform="translate(32,32)"></circle>
-    '</svg>' +
+    </svg>
-    '<svg viewBox="0 0 64 64" *ngFor="let i of _l" [ngStyle]="i.style">' +
+    <svg viewBox="0 0 64 64" *ngFor="let i of _l" [ngStyle]="i.style">
-     '<line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>' +
+     <line [attr.y1]="i.y1" [attr.y2]="i.y2" transform="translate(32,32)"></line>
-    '</svg>',
+    </svg>
+  `,
+  directives: [NgFor, NgStyle],
   host: {
     '[class]': '_applied',
     '[class.spinner-paused]': 'paused'

src/components/tabs/tabs.ts

@@ -1,8 +1,11 @@
 import { Component, ElementRef, EventEmitter, Input, Output, Optional, Renderer, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { NgClass, NgFor, NgIf } from '@angular/common';
 
 import { App } from '../app/app';
+import { Badge } from '../badge/badge';
 import { Config } from '../../config/config';
 import { Content } from '../content/content';
+import { Icon } from '../icon/icon';
 import { Ion } from '../ion';
 import { isBlank, isTrueProperty } from '../../util/util';
 import { nativeRaf } from '../../util/dom';
@@ -134,22 +137,20 @@ import { ViewController } from '../nav/view-controller';
  */
 @Component({
   selector: 'ion-tabs',
-  template:
+  template: `
-    '<ion-tabbar role="tablist" #tabbar>' +
+    <ion-tabbar role="tablist" #tabbar>
-      '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab" href="#" (ionSelect)="select($event)">' +
+      <a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab" href="#" (ionSelect)="select($event)">
-        '<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
+        <ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>
-        '<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
+        <span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>
-        '<ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +
+        <ion-badge *ngIf="t.tabBadge" class="tab-badge" [ngClass]="\'badge-\' + t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>
-        '<ion-button-effect></ion-button-effect>' +
+        <ion-button-effect></ion-button-effect>
-      '</a>' +
+      </a>
-      '<tab-highlight></tab-highlight>' +
+      <tab-highlight></tab-highlight>
-    '</ion-tabbar>' +
+    </ion-tabbar>
-    '<ng-content></ng-content>' +
+    <ng-content></ng-content>
-    '<div #portal tab-portal></div>',
+    <div #portal tab-portal></div>
-  directives: [
+  `,
-    TabButton,
+  directives: [Badge, Icon, NgClass, NgFor, NgIf, TabButton, TabHighlight],
-    TabHighlight
-  ],
   encapsulation: ViewEncapsulation.None,
 })
 export class Tabs extends Ion {

src/components/toast/toast-component.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, Component, ElementRef, Renderer } from '@angular/core';
+import { NgIf } from '@angular/common';
 
 import { Animation } from '../../animations/animation';
 import { Config } from '../../config/config';
@@ -27,6 +28,7 @@ import { ViewController } from '../nav/view-controller';
       </div>
     </div>
   `,
+  directives: [NgIf],
   host: {
     'role': 'dialog',
     '[attr.aria-labelledby]': 'hdrId',

src/components/toggle/toggle.ts

@@ -8,7 +8,7 @@ import { pointerCoord } from '../../util/dom';
 import { UIEventManager } from '../../util/ui-event-manager';
 
 
-const TOGGLE_VALUE_ACCESSOR = new Provider(
+export const TOGGLE_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Toggle), multi: true});
 
 
@@ -51,19 +51,20 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
  */
 @Component({
   selector: 'ion-toggle',
-  template:
+  template: `
-    '<div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">' +
+    <div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">
-      '<div class="toggle-inner"></div>' +
+      <div class="toggle-inner"></div>
-    '</div>' +
+    </div>
-    '<button role="checkbox" ' +
+    <button role="checkbox"
-            'type="button" ' +
+            type="button"
-            'category="item-cover" ' +
+            category="item-cover"
-            '[id]="id" ' +
+            [id]="id"
-            '[attr.aria-checked]="_checked" ' +
+            [attr.aria-checked]="_checked"
-            '[attr.aria-labelledby]="_labelId" ' +
+            [attr.aria-labelledby]="_labelId"
-            '[attr.aria-disabled]="_disabled" ' +
+            [attr.aria-disabled]="_disabled"
-            'class="item-cover">' +
+            class="item-cover">
-    '</button>',
+    </button>
+  `,
   host: {
     '[class.toggle-disabled]': '_disabled'
   },

src/components/toolbar/toolbar.ts

@@ -190,14 +190,15 @@ export class ToolbarBase extends Ion {
  */
 @Component({
   selector: 'ion-toolbar',
-  template:
+  template: `
-    '<div class="toolbar-background"></div>' +
+    <div class="toolbar-background"></div>
-    '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
+    <ng-content select="[menuToggle],ion-buttons[left]"></ng-content>
-    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    <ng-content select="ion-buttons[start]"></ng-content>
-    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
+    <ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>
-    '<div class="toolbar-content">' +
+    <div class="toolbar-content">
-      '<ng-content></ng-content>' +
+      <ng-content></ng-content>
-    '</div>',
+    </div>
+  `,
   host: {
     'class': 'toolbar',
     '[class.statusbar-padding]': '_sbPadding'