This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

downgradeComponent

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