downgradeComponent()

downgradeComponent

Experimental Function

What it does

Part of the upgrade/static library for hybrid upgrade apps that support AoT compilation

Allows an Angular component to be used from AngularJS.

How to use

Let's assume that you have an Angular component called ng2Heroes that needs to be made available in AngularJS templates.

// This Angular component will be "downgraded" to be used in AngularJS
@Component({
  selector: 'ng2-heroes',
  // This template uses the upgraded `ng1-hero` component
  // Note that because its element is compiled by Angular we must use camelCased attribute names
  template: `<header><ng-content selector="h1"></ng-content></header>
             <ng-content selector=".extra"></ng-content>
             <div *ngFor="let hero of heroes">
               <ng1-hero [hero]="hero" (onRemove)="removeHero.emit(hero)"><strong>Super Hero</strong></ng1-hero>
             </div>
             <button (click)="addHero.emit()">Add Hero</button>`,
})
class Ng2HeroesComponent {
  @Input() heroes: Hero[];
  @Output() addHero = new EventEmitter();
  @Output() removeHero = new EventEmitter();
}

We must create an AngularJS directive that will make this Angular component available inside AngularJS templates. The downgradeComponent() function returns a factory function that we can use to define the AngularJS directive that wraps the "downgraded" component.

// This is directive will act as the interface to the "downgraded"  Angular component
ng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent}));

Class Export

export downgradeComponent(info: {
  component: Type< This parameter is no longer used */
  selectors?: string[];
}) : any

A helper function that returns a factory function to be used for registering an AngularJS wrapper directive for "downgrading" an Angular component.

The parameter contains information about the Component that is being downgraded:

component: Type<any>: The type of the Component that will be downgraded

exported from upgrade-static-index defined in upgrade/static/src/common/downgrade_component.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/upgrade/static/index/downgradeComponent-function.html