Updated the button components to work with the new upgrade adapter

Anything using the old upgradeAdapter doesn't seem to work anymore. Instead we create a directive that extends UpgradeComponent. This does the upgrade for us.

Converted the ng2 buttons bootstrapper to an actual ng2 component. Otherwise we'd have to figure out how to downgrade the angular 2 components, which I wasn't ready to tackle yet.

Author: KorinaGraber

bootstrapper/app.routing.ts

@@ -5,7 +5,8 @@ import { WelcomeComponent } from './welcome.component'
 import { InputsRootComponent } from './inputs/inputRoot';
 import { InputsNg1BootstrapperComponent } from './inputs/inputBootstrapper';
 import { InputsBootstrapper } from './inputs/inputsNg2Bootstrapper';
-import { ButtonsNg1BootstrapperComponent, ButtonsNg2BootstrapperComponent } from './buttons/buttonBootstrapper';
+import { ButtonsNg1BootstrapperComponent } from './buttons/buttonBootstrapper';
+import { ButtonsNg2BootstrapperComponent } from './buttons/buttonsNg2Bootstrapper';
 import { ButtonsRootComponent } from './buttons/buttonRoot';
 import { PopupRootComponent } from './popup/popupRoot';
 import { PopupNg1BootstrapperComponent } from './popup/popupBootstrapper';

bootstrapper/app.ts

@@ -26,7 +26,8 @@ import { WelcomeComponent } from './welcome.component';
 import { InputsRootComponent } from './inputs/inputRoot';
 import { InputsNg1BootstrapperComponent } from './inputs/inputBootstrapper';
 import { InputsBootstrapper } from './inputs/inputsNg2Bootstrapper';
-import { ButtonsNg1BootstrapperComponent, ButtonsNg2BootstrapperComponent } from './buttons/buttonBootstrapper';
+import { ButtonsNg1BootstrapperComponent, ButtonsNg1Directive } from './buttons/buttonBootstrapper';
+import { ButtonsNg2BootstrapperComponent } from './buttons/buttonsNg2Bootstrapper';
 import { ButtonsRootComponent } from './buttons/buttonRoot';
 import { PopupRootComponent } from './popup/popupRoot';
 import { PopupNg1BootstrapperComponent } from './popup/popupBootstrapper';
@@ -92,8 +93,7 @@ angular.module(moduleName, [
 		ButtonsRootComponent,
 		ButtonsNg1BootstrapperComponent,
 		ButtonsNg2BootstrapperComponent,
-		upgradeAdapter.upgradeNg1Component('tsButtonsNg1'),
-		upgradeAdapter.upgradeNg1Component('tsButtonsNg2'),
+		ButtonsNg1Directive,
 
 		PopupRootComponent,
 		PopupNg1BootstrapperComponent,
@@ -133,6 +133,11 @@ angular.module(moduleName, [
 	],
 	bootstrap: [App],
 	providers: [
+		{
+			provide: '$scope',
+			useFactory: injector => injector.get('$rootScope'),
+			deps: ['$injector']
+		}
 		// {
 		// 	provide: ApplicationRef,
 		// 	useValue: {

bootstrapper/buttons/buttonBootstrapper.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, Directive, ElementRef, Injector } from '@angular/core';
+import { UpgradeComponent } from '@angular/upgrade/static';
 import * as angular from 'angular';
 
 export const moduleName: string = 'ButtonTestModule';
@@ -21,26 +22,24 @@ class ButtonTestController {
 }
 
 @Component({
-	selector: 'tsButtonsNg1',
-	template: '<ts-buttons-ng1></ts-buttons-ng1>'
+	selector: 'tsButtonsNg1Bootstrapper',
+	template: '<tsButtonsNg1></tsButtonsNg1>'
 })
 export class ButtonsNg1BootstrapperComponent { }
 
-@Component({
-	selector: 'tsButtonsNg2',
-	template: '<ts-buttons-ng2></ts-buttons-ng2>'
+@Directive({
+	selector: 'tsButtonsNg1'
 })
-export class ButtonsNg2BootstrapperComponent {}
+export class ButtonsNg1Directive extends UpgradeComponent {
+	constructor(elementRef: ElementRef, injector: Injector) {
+		super('tsButtonsNg1', elementRef, injector);
+	}
+}
 
 angular.module(moduleName, [])
 	.component('tsButtonsNg1', {
 		template: require('./buttonsNg1.html'),
 		controller: 'ButtonTestController',
 		controllerAs: 'button',
 	})
-	.component('tsButtonsNg2', {
-		template: require('./buttonsNg2.html'),
-		controller: 'ButtonTestController',
-		controllerAs: 'button',
-	})
 	.controller('ButtonTestController', ButtonTestController);

bootstrapper/buttons/buttonsNg2.html

@@ -2,37 +2,37 @@ <h3><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/mas
 <div>
 	<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/button/button.md">rlButton</a>:</h4>
 </div>
-<div><rl-button-ng (trigger)="button.action('Simple button')">Simple button</rl-button-ng></div>
-<div><rl-button-ng type="primary flat" size="lg" (trigger)="button.action('Large primary button')">Large primary button</rl-button-ng></div>
-<div><rl-button-ng disabled="true" (trigger)="button.action('Disabled button')">Disabled button</rl-button-ng></div>
+<div><rlButton (trigger)="action('Simple button')">Simple button</rlButton></div>
+<div><rlButton type="primary flat" size="lg" (trigger)="action('Large primary button')">Large primary button</rlButton></div>
+<div><rlButton [disabled]="true" (trigger)="action('Disabled button')">Disabled button</rlButton></div>
 <div>
 	<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonAsync/buttonAsync.md">rlButtonAsync</a>:</h4>
 </div>
-<div><rl-button-async-ng [action]="button.waitCallback">Async button</rl-button-async-ng></div>
-<div><rl-button-async-ng right-aligned="true" [action]="button.waitCallback">Right aligned async button</rl-button-async-ng></div>
-<div><rl-button-async-ng type="primary flat" size="lg" [action]="button.waitCallback">Large primary async button</rl-button-async-ng></div>
-<div><rl-button-async-ng disabled="true" [action]="button.waitCallback">Disabled async button</rl-button-async-ng></div>
+<div><rlButtonAsync [action]="waitCallback">Async button</rlButtonAsync></div>
+<!--<div><rlButtonAsync [action]="waitCallback">Right aligned async button</rlButtonAsync></div>-->
+<div><rlButtonAsync type="primary flat" size="lg" [action]="waitCallback">Large primary async button</rlButtonAsync></div>
+<div><rlButtonAsync [disabled]="true" [action]="waitCallback">Disabled async button</rlButtonAsync></div>
 <div>
 	<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonLink/buttonLink.md">rlButtonLink</a>:</h4>
 </div>
-<div><rl-button-link-ng link="http://google.com">Link button</rl-button-link-ng></div>
-<div><rl-button-link-ng type="primary flat" size="lg" link="http://google.com">Large primary link button</rl-button-link-ng></div>
-<div><rl-button-link-ng disabled="true" link="http://google.com">Disabled link button</rl-button-link-ng></div>
+<div><rlButtonLink link="http://google.com">Link button</rlButtonLink></div>
+<div><rlButtonLink type="primary flat" size="lg" link="http://google.com">Large primary link button</rlButtonLink></div>
+<div><rlButtonLink [disabled]="true" link="http://google.com">Disabled link button</rlButtonLink></div>
 <div>
 	<h4>rlButtonRoute:</h4>
 </div>
-<div><rl-button-route-ng link="/misc/ng2">Route link button</rl-button-route-ng></div>
-<div><rl-button-route-ng link="/buttons/ng2" active-class="btn-danger">Active route link button</rl-button-route-ng></div>
+<div><rlButtonRoute link="/misc/ng2">Route link button</rlButtonRoute></div>
+<div><rlButtonRoute link="/buttons/ng2" activeClass="btn-danger">Active route link button</rlButtonRoute></div>
 <div>
 	<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonLongClick/buttonLongClick.md">rlButtonLongClick</a>:</h4>
 </div>
-<div><rl-button-long-click-ng [action]="button.waitCallback">Long click button</rl-button-long-click-ng></div>
-<div><rl-button-long-click-ng right-aligned="true" [action]="button.waitCallback">Right aligned long click button</rl-button-long-click-ng></div>
-<div><rl-button-long-click-ng type="primary flat" size="lg" [action]="button.waitCallback">Large primary long click button</rl-button-long-click-ng></div>
-<div><rl-button-long-click-ng disabled="true" [action]="button.waitCallback">Disabled long click button</rl-button-long-click-ng></div>
+<div><rlButtonLongClick [action]="waitCallback">Long click button</rlButtonLongClick></div>
+<!--<div><rlButtonLongClick [action]="waitCallback">Right aligned long click button</rlButtonLongClick></div>-->
+<div><rlButtonLongClick type="primary flat" size="lg" [action]="waitCallback">Large primary long click button</rlButtonLongClick></div>
+<div><rlButtonLongClick [disabled]="true" [action]="waitCallback">Disabled long click button</rlButtonLongClick></div>
 <div>
 	<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonToggle/buttonToggle.md">rlButtonToggle</a>:</h4>
 </div>
-<div><rl-button-toggle-ng (change)="button.action('Toggle button: ' + $event)">Toggle button</rl-button-toggle-ng></div>
-<div><rl-button-toggle-ng type="primary flat" size="lg" (change)="button.action('Large toggle button: ' + $event)">Large primary toggle button</rl-button-toggle-ng></div>
-<div><rl-button-toggle-ng disabled="true" (change)="button.action('Disabled toggle button: ' + $event)">Disabled toggle button</rl-button-toggle-ng></div>
+<div><rlButtonToggle (valueChange)="action('Toggle button: ' + $event)">Toggle button</rlButtonToggle></div>
+<div><rlButtonToggle type="primary flat" size="lg" (valueChange)="action('Large toggle button: ' + $event)">Large primary toggle button</rlButtonToggle></div>
+<div><rlButtonToggle [disabled]="true" (valueChange)="action('Disabled toggle button: ' + $event)">Disabled toggle button</rlButtonToggle></div>

bootstrapper/buttons/buttonsNg2Bootstrapper.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+	selector: 'tsButtonsBootstrapper',
+	template: require('./buttonsNg2.html'),
+})
+export class ButtonsNg2BootstrapperComponent {
+	waitCallback: { (): Observable<void> } = () => {
+		return this.wait(this.action, 'Async button');
+	}
+
+	action(name: string): void {
+		console.log('Action: ' + name);
+	}
+
+	wait(callback, name): Observable<void> {
+		return Observable.of(null).do(() => callback(name)).delay(1000);
+	}
+}