This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.
API > @angular/upgrade > @angular/upgrade/static

UpgradeComponent

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

See more...

      
      class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy {
  constructor(name: string, elementRef: ElementRef, injector: Injector)
  ngOnInit()
  ngOnChanges(changes: SimpleChanges)
  ngDoCheck()
  ngOnDestroy()
}

Description

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

This helper class should be used as a base class for creating Angular directives that wrap AngularJS components that need to be "upgraded".

Constructor

Create a new UpgradeComponent instance. You should not normally need to do this. Instead you should derive a new class from this one and call the super constructor from the base class.
constructor(name: string, elementRef: ElementRef, injector: Injector)
      
      constructor(name: string, elementRef: ElementRef, injector: Injector)

Parameters

name

Type: string.
elementRef

Type: ElementRef.
injector

Type: Injector.
// This Angular directive will act as an interface to the "upgraded" AngularJS component @Directive({selector: 'ng1-hero'}) class Ng1HeroComponentWrapper extends UpgradeComponent { // The names of the input and output properties here must match the names of the // `<` and `&` bindings in the AngularJS component that is being wrapped @Input() hero !: Hero; @Output() onRemove !: EventEmitter<void>; constructor(elementRef: ElementRef, injector: Injector) { // We must pass the name of the directive as used by AngularJS to the super super('ng1Hero', elementRef, injector); } } 
      
      
  1. // This Angular directive will act as an interface to the "upgraded" AngularJS component
  2. @Directive({selector: 'ng1-hero'})
  3. class Ng1HeroComponentWrapper extends UpgradeComponent {
  4.   // The names of the input and output properties here must match the names of the
  5.   // `<` and `&` bindings in the AngularJS component that is being wrapped
  6.   @Input() hero !: Hero;
  7.   @Output() onRemove !: EventEmitter<void>;
  8.  
  9.   constructor(elementRef: ElementRef, injector: Injector) {
  10.     // We must pass the name of the directive as used by AngularJS to the super
  11.     super('ng1Hero', elementRef, injector);
  12.   }
  13. }
  • The name parameter should be the name of the AngularJS directive.
  • The elementRef and injector parameters should be acquired from Angular by dependency injection into the base class constructor.

Methods

ngOnInit()

ngOnInit()
      
      ngOnInit()

Parameters

There are no parameters.

ngOnChanges()

ngOnChanges(changes: SimpleChanges)
      
      ngOnChanges(changes: SimpleChanges)

Parameters

changes

Type: SimpleChanges.

ngDoCheck()

ngDoCheck()
      
      ngDoCheck()

Parameters

There are no parameters.

ngOnDestroy()

ngOnDestroy()
      
      ngOnDestroy()

Parameters

There are no parameters.

Usage notes

Examples

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

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

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

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

In this example you can see that we must derive from the UpgradeComponent base class but also provide an `@Directive` decorator. This is because the AoT compiler requires that this information is statically available at compile time.

Note that we must do the following:

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

  • call the base class from the constructor, passing

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