downgradeComponent
A helper function that allows an Angular component to be used from AngularJS.
API
function downgradeComponent(info: { component: Type<any>; downgradedModule?: string | undefined; propagateDigest?: boolean | undefined; inputs?: string[] | undefined; outputs?: string[] | undefined; selectors?: string[] | undefined;}): any;Description
A helper function that allows an Angular component to be used from AngularJS.
Part of the upgrade/static library for hybrid upgrade apps that support AOT compilation
This helper function returns a factory function to be used for registering an AngularJS wrapper directive for "downgrading" an Angular component.
Usage Notes
Examples
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>`, standalone: false,})export class Ng2HeroesComponent { heroes = input<Hero[]>([]); addHero = output<void>(); removeHero = output<Hero>();}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 directive will act as the interface to the "downgraded" Angular componentng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent}));For more details and examples on downgrading Angular components to AngularJS components please visit the Upgrade guide.