directive
A helper class that allows an AngularJS component to be used from Angular.
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".
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'}) export 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); } }
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:
ng1-hero
)UpgradeComponent
ng1Hero
)ElementRef
and Injector
for the component wrapper ngOnInit() |
---|
|
ngOnChanges() |
---|
ngDoCheck() |
---|
|
ngOnDestroy() |
---|
|
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/upgrade/static/UpgradeComponent