UpgradeComponent

class

Overview

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

How To Use

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>`
});

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 implements OnInit, OnChanges, DoCheck,
    OnDestroy {
  // 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(@Inject(ElementRef) elementRef: ElementRef, @Inject(Injector) injector: Injector) {
    // We must pass the name of the directive as used by AngularJS to the super
    super('ng1Hero', elementRef, injector);
  }

  // For this class to work when compiled with AoT, we must implement these lifecycle hooks
  // because the AoT compiler will not realise that the super class implements them
  ngOnInit() { super.ngOnInit(); }

  ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); }

  ngDoCheck() { super.ngDoCheck(); }

  ngOnDestroy() { super.ngOnDestroy(); }
}

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

Description

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

Constructor

// This Angular directive will act as an interface to the "upgraded" AngularJS component
@Directive({selector: 'ng1-hero'})
class Ng1HeroComponentWrapper extends UpgradeComponent implements OnInit, OnChanges, DoCheck,
    OnDestroy {
  // 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(@Inject(ElementRef) elementRef: ElementRef, @Inject(Injector) injector: Injector) {
    // We must pass the name of the directive as used by AngularJS to the super
    super('ng1Hero', elementRef, injector);
  }

  // For this class to work when compiled with AoT, we must implement these lifecycle hooks
  // because the AoT compiler will not realise that the super class implements them
  ngOnInit() { super.ngOnInit(); }

  ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); }

  ngDoCheck() { super.ngDoCheck(); }

  ngOnDestroy() { super.ngOnDestroy(); }
}

Members

ngOnInit()

ngOnChanges(changes: SimpleChanges)

ngDoCheck()

ngOnDestroy()