{ "id": "api/upgrade/static/UpgradeComponent", "title": "UpgradeComponent", "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

UpgradeComponentlink

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

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

\n\n

See more...

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

NgModuleslink

\n\n\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 class should be used as a base class for creating Angular directives\nthat wrap AngularJS components that need to be \"upgraded\".

\n\n

Exampleslink

\n

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

\n\n// This AngularJS component will be \"upgraded\" to be used in Angular\nng1AppModule.component('ng1Hero', {\n bindings: {hero: '<', onRemove: '&'},\n transclude: true,\n template: `<div class=\"title\" ng-transclude></div>\n <h2>{{ $ctrl.hero.name }}</h2>\n <p>{{ $ctrl.hero.description }}</p>\n <button ng-click=\"$ctrl.onRemove()\">Remove</button>`\n});\n\n\n

We must create a Directive that will make this AngularJS component\navailable inside Angular templates.

\n\n// This Angular directive will act as an interface to the \"upgraded\" AngularJS component\n@Directive({selector: 'ng1-hero'})\nexport class Ng1HeroComponentWrapper extends UpgradeComponent {\n // The names of the input and output properties here must match the names of the\n // `<` and `&` bindings in the AngularJS component that is being wrapped\n @Input() hero!: Hero;\n @Output() onRemove!: EventEmitter<void>;\n\n constructor(elementRef: ElementRef, injector: Injector) {\n // We must pass the name of the directive as used by AngularJS to the super\n super('ng1Hero', elementRef, injector);\n }\n}\n\n\n

In this example you can see that we must derive from the UpgradeComponent\nbase class but also provide an `@Directive` decorator. This is\nbecause the AOT compiler requires that this information is statically available at\ncompile time.

\n

Note that we must do the following:

\n
    \n
  • specify the directive's selector (ng1-hero)
    • \n
  • specify all inputs and outputs that the AngularJS component expects
    • \n
  • derive from UpgradeComponent
    • \n
  • \n

    call the base class from the constructor, passing

    \n
      \n
    • the AngularJS name of the component (ng1Hero)
      • \n
    • the ElementRef and Injector for the component wrapper
      • \n
    \n
    • \n
\n\n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

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

\n ngOnInit()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnInit()\n\n \n\n
Parameters
\n

There are no parameters.

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

\n ngOnChanges()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnChanges(changes: SimpleChanges)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n changes\n SimpleChanges\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngDoCheck()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngDoCheck()\n\n \n\n
Parameters
\n

There are no parameters.

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

\n ngOnDestroy()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnDestroy()\n\n \n\n
Parameters
\n

There are no parameters.

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