downgradeComponent

function

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

function downgradeComponent(info: { component: Type<any>; propagateDigest?: boolean; inputs?: string[]; outputs?: string[]; 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