downgradeComponent

function

npm Package @angular/upgrade
Module import { downgradeComponent } from '@angular/upgrade/static';
Source upgrade/src/common/downgrade_component.ts

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

Allows an Angular component to be used from AngularJS.

function downgradeComponent(info: { component: Type<any>; /** @deprecated since v4. This parameter is no longer used */ inputs?: string[]; /** @deprecated since v4. This parameter is no longer used */ outputs?: string[]; /** @deprecated since v4. This parameter is no longer used */ selectors?: string[]; }): any;

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}));

Description

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

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v4.angular.io/api/upgrade/static/downgradeComponent