angular 2 downgrade on directives not working

Viewed 1662

I am trying to downgrade angular 2 directives to use with Angular 1.5 app. We are able to downgrade Angular 2 components , but not directives.

    import { Directive, ElementRef, Input, Renderer } from '@angular/core';
    import { UpgradeComponent } from '@angular/upgrade/static';

    @Directive({
        selector: 'myDir'
    })
    export class MyDirective {
        constructor(public el: ElementRef, public renderer: Renderer) {
            console.log('constructor');
        }
        ngOnInit() {
            console.log("onInit");
        }
    }

  angular.module(myapp)
            .directive('myDir', downgradeComponent({ component: MyDirective }));

When i try to use the directive in Angular 1 app, it's not firing the constructor or ngOnInit.

This is how i am using it.

 <myDir></myDir>
1 Answers

You cannot downgrade @Directive from angular 2 to angular 1. We struggled with similar problem, we solved it in not so pretty way. We are downgrading @Component with ng-content as the template, and then wrap the element with it (temporary solution, once all is in angular 2, we refactor it)

so we would have

@Component({
        selector: 'myDir',
        template: '<ng-content></ng-content>'
    })

and this is how we apply it

<myDir><someOtherElementsWhereDirectiveShouldBeApplied></myDir>
Related