{ "id": "api/upgrade/static/downgradeComponent", "title": "downgradeComponent", "contents": "\n\n
\n
\n
\n \n API > @angular/upgrade > @angular/upgrade/static\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

downgradeComponentlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

A helper function that allows an Angular component to be used from AngularJS.

\n\n

See more...

\n
\n \n \n \n\n
\n \n\n downgradeComponent(info: { component: Type<any>; downgradedModule?: string; propagateDigest?: boolean; inputs?: string[]; outputs?: string[]; selectors?: string[]; }): any\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n info\n object\n

contains information about the Component that is being downgraded:

\n
    \n
  • component: Type<any>: The type of the Component that will be downgraded
    • \n
  • downgradedModule?: string: The name of the downgraded module (if any) that the component\n\"belongs to\", as returned by a call to downgradeModule(). It is the module, whose\ncorresponding Angular module will be bootstrapped, when the component needs to be instantiated.\n
    \n(This option is only necessary when using downgradeModule() to downgrade more than one\nAngular module.)
    • \n
  • propagateDigest?: boolean: Whether to perform change detection on the component on every\n$digest. If set to false,\nchange detection will still be performed when any of the component's inputs changes.\n(Default: true)
    • \n
\n\n
\n\n \n
Returns
\n

any: a factory function that can be used to register the component in an\nAngularJS module.

\n\n \n\n\n \n\n \n
\n\n\n \n\n \n\n
\n

Descriptionlink

\n

Part of the upgrade/static\nlibrary for hybrid upgrade apps that support AOT compilation

\n

This helper function returns a factory function to be used for registering\nan AngularJS wrapper directive for \"downgrading\" an Angular component.

\n\n

Further information available in the Usage Notes...

\n
\n\n\n\n \n
\n

Usage noteslink

\n

Exampleslink

\n

Let's assume that you have an Angular component called ng2Heroes that needs\nto be made available in AngularJS templates.

\n\n// This Angular component will be \"downgraded\" to be used in AngularJS\n@Component({\n selector: 'ng2-heroes',\n // This template uses the upgraded `ng1-hero` component\n // Note that because its element is compiled by Angular we must use camelCased attribute names\n template: `<header><ng-content selector=\"h1\"></ng-content></header>\n <ng-content selector=\".extra\"></ng-content>\n <div *ngFor=\"let hero of heroes\">\n <ng1-hero [hero]=\"hero\" (onRemove)=\"removeHero.emit(hero)\"><strong>Super Hero</strong></ng1-hero>\n </div>\n <button (click)=\"addHero.emit()\">Add Hero</button>`,\n})\nexport class Ng2HeroesComponent {\n @Input() heroes!: Hero[];\n @Output() addHero = new EventEmitter();\n @Output() removeHero = new EventEmitter();\n}\n\n\n

We must create an AngularJS directive\nthat will make this Angular component available inside AngularJS templates.\nThe downgradeComponent() function returns a factory function that we\ncan use to define the AngularJS directive that wraps the \"downgraded\" component.

\n\n// This directive will act as the interface to the \"downgraded\" Angular component\nng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent}));\n\n\n

For more details and examples on downgrading Angular components to AngularJS components please\nvisit the Upgrade guide.

\n\n
\n\n\n\n
\n
\n\n\n" }