downgradeComponent

Experimental Function

What it does

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

Allows an Angular 2+ component to be used from Angular 1.

How to use

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

// This Angular 2 component will be "downgraded" to be used in Angular 1
@Component({
  selector: 'ng2-heroes',
  // This template uses the upgraded `ng1-hero` component
  // Note that because its element is compiled by Angular 2+ we must use camelCased attribute names
  template: `<h1>Heroes</h1>
             <p><ng-content></ng-content></p>
             <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 Angular 1 directive that will make this Angular 2+ component available inside Angular 1 templates. The downgradeComponent() function returns a factory function that we can use to define the Angular 1 directive that wraps the "downgraded" component.

// This is directive will act as the interface to the "downgraded"  Angular 2+ component
ng1AppModule.directive(
    'ng2Heroes',
    downgradeComponent(
        // The inputs and outputs here must match the relevant names of the properties on the
        // "downgraded" component
        {component: Ng2HeroesComponent, inputs: ['heroes'], outputs: ['addHero', 'removeHero']}));

In this example you can see that we must provide information about the component being "downgraded". This is because once the AoT compiler has run, all metadata about the component has been removed from the code, and so cannot be inferred.

We must do the following:

• specify the Angular 2+ component class that is to be downgraded
• specify all inputs and outputs that the Angular 1 component expects

Class Export

export downgradeComponent(info: /* ComponentInfo */ {
  component: Type<any>;
  inputs?: string[];
  outputs?: string[];
}) : any

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

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

• component: Type<any>: The type of the Component that will be downgraded
• inputs: string[]: A collection of strings that specify what inputs the component accepts.
• outputs: string[]: A collection of strings that specify what outputs the component emits.

The inputs and outputs are strings that map the names of properties to camelCased attribute names. They are of the form "prop: attr"; or simply `"propAndAttr" where the property and attribute have the same identifier.

exported from @angular/upgrade/static defined in @angular/upgrade/src/aot/downgrade_component.ts