class UpgradeAdapter {
  constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions)
  
  
  downgradeNg2Component(component: Type<any>) : Function
  upgradeNg1Component(name: string) : Type<any>
  registerForNg1Tests(modules?: string[]) : UpgradeAdapterRef
  bootstrap(element: Element, modules?: any[], config?:IAngularBootstrapConfig) : UpgradeAdapterRef
  upgradeNg1Provider(name: string, options?: {asToken: any})
  downgradeNg2Provider(token: any) : Function
}

const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module), myCompilerOptions);
const module = angular.module('myExample', []);
module.directive('ng2Comp', adapter.downgradeNg2Component(Ng2Component));

module.directive('ng1Hello', function() {
  return {
     scope: { title: '=' },
     template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
  };
});


@Component({
  selector: 'ng2-comp',
  inputs: ['name'],
  template: 'ng2[<ng1-hello [title]="name">transclude</ng1-hello>](<ng-content></ng-content>)',
  directives:
})
class Ng2Component {
}

@NgModule({
  declarations: [Ng2Component, adapter.upgradeNg1Component('ng1Hello')],
  imports: [BrowserModule]
})
class MyNg2Module {}


document.body.innerHTML = '<ng2-comp name="World">project</ng2-comp>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual(
      "ng2[ng1[Hello World!](transclude)](project)");
});

constructor(ng2AppModule: Type<any>, compilerOptions?: CompilerOptions)

Class Details

downgradeNg2Component(component: Type<any>) : Function

Allows Angular Component to be used from AngularJS.

Use downgradeNg2Component to create an AngularJS Directive Definition Factory from Angular Component. The adapter will bootstrap Angular component from within the AngularJS template.

Mental Model

1. The component is instantiated by being listed in AngularJS template. This means that the host element is controlled by AngularJS, but the component's view will be controlled by Angular.
2. Even thought the component is instantiated in AngularJS, it will be using Angular syntax. This has to be done, this way because we must follow Angular components do not declare how the attributes should be interpreted.
3. ng-model is controlled by AngularJS and communicates with the downgraded Angular component by way of the ControlValueAccessor interface from @angular/forms. Only components that implement this interface are eligible.

Supported Features

• Bindings:
  • Attribute: <comp name="World">
  • Interpolation: <comp greeting="Hello {{name}}!">
  • Expression: <comp [name]="username">
  • Event: <comp (close)="doSomething()">
  • ng-model: <comp ng-model="name">
• Content projection: yes

const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
const module = angular.module('myExample', []);
module.directive('greet', adapter.downgradeNg2Component(Greeter));

@Component({
  selector: 'greet',
  template: '{{salutation}} {{name}}! - <ng-content></ng-content>'
})
class Greeter {
  @Input() salutation: string;
  @Input() name: string;
}

@NgModule({
  declarations: [Greeter],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML =
  'ng1 template: <greet salutation="Hello" [name]="world">text</greet>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual("ng1 template: Hello world! - text");
});

upgradeNg1Component(name: string) : Type<any>

Allows AngularJS Component to be used from Angular.

Use upgradeNg1Component to create an Angular component from AngularJS Component directive. The adapter will bootstrap AngularJS component from within the Angular template.

Mental Model

1. The component is instantiated by being listed in Angular template. This means that the host element is controlled by Angular, but the component's view will be controlled by AngularJS.

Supported Features

• Bindings:
  • Attribute: <comp name="World">
  • Interpolation: <comp greeting="Hello {{name}}!">
  • Expression: <comp [name]="username">
  • Event: <comp (close)="doSomething()">
• Transclusion: yes
• Only some of the features of Directive Definition Object are supported:
  • compile: not supported because the host element is owned by Angular, which does not allow modifying DOM structure during compilation.
  • controller: supported. (NOTE: injection of $attrs and $transclude is not supported.)
  • controllerAs: supported.
  • bindToController: supported.
  • link: supported. (NOTE: only pre-link function is supported.)
  • name: supported.
  • priority: ignored.
  • replace: not supported.
  • require: supported.
  • restrict: must be set to 'E'.
  • scope: supported.
  • template: supported.
  • templateUrl: supported.
  • terminal: ignored.
  • transclude: supported.

const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));
const module = angular.module('myExample', []);

module.directive('greet', function() {
  return {
    scope: {salutation: '=', name: '=' },
    template: '{{salutation}} {{name}}! - <span ng-transclude></span>'
  };
});

module.directive('ng2', adapter.downgradeNg2Component(Ng2Component));

@Component({
  selector: 'ng2',
  template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'
})
class Ng2Component {
}

@NgModule({
  declarations: [Ng2Component, adapter.upgradeNg1Component('greet')],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML = '<ng2></ng2>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual("ng2 template: Hello world! - text");
});

registerForNg1Tests(modules?: string[]) : UpgradeAdapterRef

Registers the adapter's AngularJS upgrade module for unit testing in AngularJS. Use this instead of angular.mock.module() to load the upgrade module into the AngularJS testing injector.

const upgradeAdapter = new UpgradeAdapter(MyNg2Module);

// configure the adapter with upgrade/downgrade components and services
upgradeAdapter.downgradeNg2Component(MyComponent);

let upgradeAdapterRef: UpgradeAdapterRef;
let $compile, $rootScope;

// We must register the adapter before any calls to `inject()`
beforeEach(() => {
  upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(['heroApp']);
});

beforeEach(inject((_$compile_, _$rootScope_) => {
  $compile = _$compile_;
  $rootScope = _$rootScope_;
}));

it("says hello", (done) => {
  upgradeAdapterRef.ready(() => {
    const element = $compile("<my-component></my-component>")($rootScope);
    $rootScope.$apply();
    expect(element.html()).toContain("Hello World");
    done();
  })
});

bootstrap(element: Element, modules?: any[], config?:IAngularBootstrapConfig) : UpgradeAdapterRef

Bootstrap a hybrid AngularJS / Angular application.

This bootstrap method is a direct replacement (takes same arguments) for AngularJS bootstrap method. Unlike AngularJS, this bootstrap is asynchronous.

const adapter = new UpgradeAdapter(MyNg2Module);
const module = angular.module('myExample', []);
module.directive('ng2', adapter.downgradeNg2Component(Ng2));

module.directive('ng1', function() {
  return {
     scope: { title: '=' },
     template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
  };
});


@Component({
  selector: 'ng2',
  inputs: ['name'],
  template: 'ng2[<ng1 [title]="name">transclude</ng1>](<ng-content></ng-content>)'
})
class Ng2 {
}

@NgModule({
  declarations: [Ng2, adapter.upgradeNg1Component('ng1')],
  imports: [BrowserModule]
})
class MyNg2Module {}

document.body.innerHTML = '<ng2 name="World">project</ng2>';

adapter.bootstrap(document.body, ['myExample']).ready(function() {
  expect(document.body.textContent).toEqual(
      "ng2[ng1[Hello World!](transclude)](project)");
});

upgradeNg1Provider(name: string, options?: {asToken: any})

Allows AngularJS service to be accessible from Angular.

class Login { ... }
class Server { ... }

@Injectable()
class Example {
  constructor(@Inject('server') server, login: Login) {
    ...
  }
}

const module = angular.module('myExample', []);
module.service('server', Server);
module.service('login', Login);

const adapter = new UpgradeAdapter(MyNg2Module);
adapter.upgradeNg1Provider('server');
adapter.upgradeNg1Provider('login', {asToken: Login});

adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
  const example: Example = ref.ng2Injector.get(Example);
});

downgradeNg2Provider(token: any) : Function

Allows Angular service to be accessible from AngularJS.

class Example {
}

const adapter = new UpgradeAdapter(MyNg2Module);

const module = angular.module('myExample', []);
module.factory('example', adapter.downgradeNg2Provider(Example));

adapter.bootstrap(document.body, ['myExample']).ready((ref) => {
  const example: Example = ref.ng1Injector.get('example');
});