Downgrading Components

Upgrading components sounds like it should happen before downgrading, but the point of upgrading is to make an Angular 1.x component work with Angular 2. For an Angular 2 component to use an Angular 1.x component in an ng-upgrade application there must first be a downgraded Angular 2 component. Consequently it's important to first learn how to downgrade Angular 2 components to work with Angular 1.x

All downgraded components operate like Angular 1.x 'E' element directives.

Here is an example of a very simple Angular 2 component:

import {Component} from '@angular/core';
@Component({
selector: 'a2-downgrade',
template: '<p>{{ message }}</p>'
})
export class A2DowngradeComponent {
message = `What you're seeing here is an Angular2 component ` +
`running in an Angular1 app!`;
}

Registering the downgraded component with Angular 1.x:

// Angular 1 Vendor Import
import * as angular from 'angular';
// Import the upgradeAdapter singleton
import {upgradeAdapter} from './upgrade-adapter';
// Angular 2 component from above
import {A2DowngradeComponent} from './components/a2-downgrade';
// Register classic Angular 1 modules
angular
.module(APPNAME)
.directive('a2Downgrade',
upgradeAdapter.downgradeNg2Component(A2DowngradeComponent));