Upgrade ng2-bootstrap to rc.1

components/accordion/accordion-group.component.ts

@@ -1,7 +1,7 @@
 import {
   Component, OnInit, OnDestroy, Input, HostBinding, Inject
-} from 'angular2/core';
-import {NgClass} from 'angular2/common';
+} from '@angular/core';
+import {NgClass} from '@angular/common';
 import {CollapseDirective} from '../collapse';
 import {AccordionComponent} from './accordion.component';
 

components/accordion/accordion.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, HostBinding} from 'angular2/core';
+import {Component, Input, HostBinding} from '@angular/core';
 import {AccordionPanelComponent} from './accordion-group.component';
 
 // todo: support template url

components/alert/alert.component.spec.ts

@@ -1,8 +1,9 @@
-import {it, beforeEach, injectAsync, TestComponentBuilder, ComponentFixture} from 'angular2/testing';
+import {it, beforeEach, injectAsync } from '@angular/core/testing';
+import { TestComponentBuilder, ComponentFixture } from '@angular/compiler/testing';
 import {AlertComponent} from './alert.component';
 
 describe('Component: Alert', () => {
-    let fixture:ComponentFixture, context:any;
+    let fixture:ComponentFixture<any>, context:any;
     const overTemplate = `
                   <div class="alert" role="alert" [ngClass]="classes" *ngIf="!closed">
                     <button *ngIf="dismissible" type="button" class="close" (click)="onClose()" (touch)="onClose()">
@@ -16,7 +17,7 @@ describe('Component: Alert', () => {
         return tcb
             .overrideTemplate(AlertComponent, overTemplate)
             .createAsync(AlertComponent)
-            .then((f:ComponentFixture) => {
+            .then((f:ComponentFixture<any>) => {
                 fixture = f;
                 context = fixture.debugElement.componentInstance;
             });

components/alert/alert.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit, Input, Output, EventEmitter} from 'angular2/core';
-import {NgIf, NgClass} from 'angular2/common';
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import {NgIf, NgClass} from '@angular/common';
 
 const ALERT_TEMPLATE = `
   <div class="alert" role="alert" [ngClass]="classes" *ngIf="!closed">

components/buttons/button-checkbox.directive.ts

@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, Input, HostBinding, HostListener, Self
-} from 'angular2/core';
-import {ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {ControlValueAccessor, NgModel} from '@angular/common';
 
 @Directive({selector: '[btnCheckbox][ngModel]'})
 export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {

components/buttons/button-radio.directive.ts

@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, Input, HostBinding, HostListener, Self, ElementRef
-} from 'angular2/core';
-import {ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {ControlValueAccessor, NgModel} from '@angular/common';
 
 @Directive({selector: '[btnRadio][ngModel]'})
 export class ButtonRadioDirective implements ControlValueAccessor, OnInit {

components/carousel/carousel.component.ts

@@ -1,7 +1,7 @@
 // todo: add animate
 
-import {Component, OnDestroy, Input} from 'angular2/core';
-import {NgFor} from 'angular2/common';
+import {Component, OnDestroy, Input} from '@angular/core';
+import {NgFor} from '@angular/common';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {SlideComponent} from './slide.component';
 
@@ -36,7 +36,7 @@ const NAVIGATION:any = {
   template: `
     <div (mouseenter)="pause()" (mouseleave)="play()" class="carousel slide">
       <ol class="carousel-indicators" *ngIf="slides.length > 1">
-         <li *ngFor="#slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
+         <li *ngFor="let slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
       </ol>
       <div class="carousel-inner"><ng-content></ng-content></div>
       ${NAVIGATION[Ng2BootstrapConfig.theme]}

components/carousel/slide.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, OnDestroy, Input, HostBinding} from 'angular2/core';
+import {Component, OnInit, OnDestroy, Input, HostBinding} from '@angular/core';
 import {CarouselComponent, Direction} from './carousel.component';
 
 @Component({

components/collapse/collapse.directive.ts

@@ -1,6 +1,6 @@
-import {Directive, OnInit, ElementRef, Input, HostBinding, Renderer} from 'angular2/core';
-import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
-// fix: replace with // 'angular2/animate';
+import {Directive, OnInit, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
+import {AnimationBuilder} from '@angular/platform-browser/src/animate/animation_builder';
+// fix: replace with // '@angular/animate';
 // when https://github.com/angular/angular/issues/5984 will be fixed
 
 // TODO: remove ElementRef

components/common.ts

@@ -1,4 +1,4 @@
-import {Directive, TemplateRef, ViewContainerRef, Inject} from 'angular2/core';
+import {Directive, TemplateRef, ViewContainerRef, Inject} from '@angular/core';
 
 export interface KeyAttribute {
   [key:string]:any;
@@ -11,16 +11,16 @@ export interface KeyAttribute {
 export class NgTranscludeDirective {
   public viewRef:ViewContainerRef;
 
-  private _ngTransclude:TemplateRef;
+  private _ngTransclude:TemplateRef<any>;
 
-  private set ngTransclude(templateRef:TemplateRef) {
+  private set ngTransclude(templateRef:TemplateRef<any>) {
     this._ngTransclude = templateRef;
     if (templateRef) {
       this.viewRef.createEmbeddedView(templateRef);
     }
   }
 
-  private get ngTransclude():TemplateRef {
+  private get ngTransclude():TemplateRef<any> {
     return this._ngTransclude;
   }
 

components/datepicker/datepicker-inner.component.ts

@@ -1,7 +1,7 @@
-import {Component, OnInit, EventEmitter, Input} from 'angular2/core';
+import {Component, OnInit, EventEmitter, Input} from '@angular/core';
 import {
   CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel
-} from 'angular2/common';
+} from '@angular/common';
 import {DateFormatter} from './date-formatter';
 
 const FORMAT_DAY = 'DD';

components/datepicker/datepicker-popup.component.ts

@@ -1,10 +1,10 @@
 import {
   Component, Directive, EventEmitter, ComponentRef, ViewEncapsulation,
   ElementRef, DynamicComponentLoader, Self, Renderer, ReflectiveInjector, provide, ViewContainerRef
-} from 'angular2/core';
+} from '@angular/core';
 import {
   CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel, NgStyle
-} from 'angular2/common';
+} from '@angular/common';
 import {KeyAttribute} from '../common';
 import {positionService} from '../position';
 import {DatePickerComponent} from './datepicker.component';
@@ -127,7 +127,7 @@ export class DatePickerPopupDirective {
   private _activeDate:Date;
   private _isOpen:boolean = false;
   private placement:string = 'bottom';
-  private popup:Promise<ComponentRef>;
+  private popup:Promise<ComponentRef<any>>;
 
   public constructor(@Self() cd:NgModel, viewContainerRef:ViewContainerRef,
                      renderer:Renderer, loader:DynamicComponentLoader) {
@@ -166,7 +166,7 @@ export class DatePickerPopupDirective {
 
   public hide(cb:Function):void {
     if (this.popup) {
-      this.popup.then((componentRef:ComponentRef) => {
+      this.popup.then((componentRef:ComponentRef<any>) => {
         componentRef.destroy();
         cb();
         return componentRef;
@@ -187,7 +187,7 @@ export class DatePickerPopupDirective {
 
     this.popup = this.loader
       .loadNextToLocation(PopupContainerComponent, this.viewContainerRef, binding)
-      .then((componentRef:ComponentRef) => {
+      .then((componentRef:ComponentRef<any>) => {
         componentRef.instance.position(this.viewContainerRef);
         componentRef.instance.popupComp = this;
         /*componentRef.instance.update1.observer({

components/datepicker/datepicker.component.ts

@@ -1,5 +1,5 @@
-import {Component, Self, Input} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, ControlValueAccessor, NgModel} from 'angular2/common';
+import {Component, Self, Input} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, ControlValueAccessor, NgModel} from '@angular/common';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 import {DayPickerComponent} from './daypicker.component';
 import {MonthPickerComponent} from './monthpicker.component';

components/datepicker/daypicker.component.ts

@@ -1,17 +1,17 @@
-import {Component, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 
 // write an interface for template options
 const TEMPLATE_OPTIONS:any = {
   [Ng2BootstrapTheme.BS4]: {
     DAY_TITLE: `
-        <th *ngFor="#labelz of labels" class="text-xs-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
+        <th *ngFor="let labelz of labels" class="text-xs-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
     `,
     WEEK_ROW: `
         <td *ngIf="datePicker.showWeeks" class="text-xs-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <td *ngFor="#dtz of rowz" class="text-xs-center" role="gridcell" [id]="dtz.uid">
+        <td *ngFor="let dtz of rowz" class="text-xs-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-secondary': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled}"
@@ -26,11 +26,11 @@ const TEMPLATE_OPTIONS:any = {
   },
   [Ng2BootstrapTheme.BS3]: {
     DAY_TITLE: `
-        <th *ngFor="#labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
+        <th *ngFor="let labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
     `,
     WEEK_ROW: `
         <td *ngIf="datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <td *ngFor="#dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
+        <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-default btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
@@ -83,7 +83,7 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme ||
     </tr>
   </thead>
   <tbody>
-    <template ngFor [ngForOf]="rows" #rowz="$implicit" #index="index">
+    <template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
       <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
         ${CURRENT_THEME_TEMPLATE.WEEK_ROW}
       </tr>

components/datepicker/monthpicker.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 
@@ -54,8 +54,8 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="#rowz of rows">
-      <td *ngFor="#dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
+    <tr *ngFor="let rowz of rows">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
         ${CURRENT_THEME_TEMPLATE.MONTH_BUTTON}
       </td>
     </tr>

components/datepicker/yearpicker.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Component, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 import {DatePickerInnerComponent} from './datepicker-inner.component';
 
@@ -59,8 +59,8 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="#rowz of rows">
-      <td *ngFor="#dtz of rowz" class="text-center" role="gridcell">
+    <tr *ngFor="let rowz of rows">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell">
       ${CURRENT_THEME_TEMPLATE.YEAR_BUTTON}
       </td>
     </tr>

components/dropdown/dropdown-keyboard-nav.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, HostListener} from 'angular2/core';
+import {Directive, ElementRef, HostListener} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
 @Directive({

components/dropdown/dropdown-menu.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Host, OnInit} from 'angular2/core';
+import {Directive, ElementRef, Host, OnInit} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
 @Directive({selector: '[dropdownMenu]'})

components/dropdown/dropdown-toggle.directive.ts

@@ -1,9 +1,9 @@
 import {
   Directive, ElementRef, Host, OnInit, Input, HostBinding, HostListener
-} from 'angular2/core';
+} from '@angular/core';
 import {DropdownDirective} from './dropdown.directive';
 
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 /* tslint:disable */
 const MouseEvent = (global as any).MouseEvent as MouseEvent;
 /* tslint:enable */

components/dropdown/dropdown.directive.ts

@@ -1,7 +1,7 @@
 import {
   Directive, OnInit, OnDestroy, Input, Output, HostBinding, EventEmitter,
   ElementRef
-} from 'angular2/core';
+} from '@angular/core';
 import {dropdownService, NONINPUT} from './dropdown.service';
 
 @Directive({selector: '[dropdown]'})

components/dropdown/dropdown.interfaces.ts

@@ -1,4 +1,4 @@
-import {ElementRef} from 'angular2/core';
+import {ElementRef} from '@angular/core';
 
 export interface DropdownMenuInterface {
   el: ElementRef;

components/ng2-bootstrap-config.ts

@@ -1,4 +1,4 @@
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 
 export enum Ng2BootstrapTheme {BS3 = 1, BS4 = 2}
 

components/pagination/pager.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit, ElementRef, Renderer, Self} from 'angular2/core';
-import {NgModel, NgClass} from 'angular2/common';
+import {Component, OnInit, ElementRef, Renderer, Self} from '@angular/core';
+import {NgModel, NgClass} from '@angular/common';
 import {PaginationComponent} from './pagination.component';
 
 const pagerConfig = {

components/pagination/pagination.component.ts

@@ -1,7 +1,7 @@
 import {
   Component, OnInit, Input, Output, ElementRef, EventEmitter, Self, Renderer
-} from 'angular2/core';
-import {NgFor, NgIf, ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {NgFor, NgIf, ControlValueAccessor, NgModel} from '@angular/common';
 import {KeyAttribute} from '../common';
 
 // todo: extract base functionality classes
@@ -51,7 +51,7 @@ const PAGINATION_TEMPLATE = `
       <a class="page-link" href (click)="selectPage(page - 1, $event)" [innerHTML]="getText('previous')"></a>
       </li>
 
-    <li *ngFor="#pg of pages"
+    <li *ngFor="let pg of pages"
         [class.active]="pg.active"
         [class.disabled]="disabled&&!pg.active"
         class="pagination-page page-item">

components/progressbar/bar.component.ts

@@ -1,5 +1,5 @@
-import {Component, OnInit, OnDestroy, Input, Host} from 'angular2/core';
-import {NgClass, NgStyle} from 'angular2/common';
+import {Component, OnInit, OnDestroy, Input, Host} from '@angular/core';
+import {NgClass, NgStyle} from '@angular/common';
 import {ProgressDirective} from './progress.directive';
 
 // todo: number pipe

components/progressbar/progress.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, OnInit, Input, HostBinding} from 'angular2/core';
+import {Directive, OnInit, Input, HostBinding} from '@angular/core';
 import {BarComponent} from './bar.component';
 
 const progressConfig = {

components/progressbar/progressbar.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from 'angular2/core';
+import {Component, Input} from '@angular/core';
 import {ProgressDirective} from './progress.directive';
 import {BarComponent} from './bar.component';
 

components/rating/rating.component.ts

@@ -1,9 +1,9 @@
 import {
   Component, OnInit, Input, Output, HostListener, Self, EventEmitter
-} from 'angular2/core';
-import {NgFor, ControlValueAccessor, NgModel} from 'angular2/common';
+} from '@angular/core';
+import {NgFor, ControlValueAccessor, NgModel} from '@angular/common';
 
-import {global} from 'angular2/src/facade/lang';
+import {global} from '@angular/core/src/facade/lang';
 /* tslint:disable */
 const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
 /* tslint:enable */
@@ -15,7 +15,7 @@ const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
   directives: [NgFor],
   template: `
     <span (mouseleave)="reset()" (keydown)="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" [attr.aria-valuemax]="range.length" [attr.aria-valuenow]="value">
-      <template ngFor #r [ngForOf]="range" #index="index">
+      <template ngFor let-r [ngForOf]="range" let-index="index">
         <span class="sr-only">({{ index < value ? '*' : ' ' }})</span>
         <i (mouseenter)="enter(index + 1)" (click)="rate(index + 1)" class="glyphicon" [ngClass]="index < value ? r.stateOn : r.stateOff" [title]="r.title" ></i>
       </template>

components/tabs/tab-heading.directive.ts

@@ -1,10 +1,10 @@
-import {Directive, TemplateRef} from 'angular2/core';
+import {Directive, TemplateRef} from '@angular/core';
 import {TabDirective} from './tab.directive';
 
 @Directive({selector: '[tabHeading]'})
 export class TabHeadingDirective {
-  public templateRef:TemplateRef;
-  public constructor(templateRef:TemplateRef, tab:TabDirective) {
+  public templateRef:TemplateRef<any>;
+  public constructor(templateRef:TemplateRef<any>, tab:TabDirective) {
     tab.headingRef = templateRef;
   }
 }