Downgrade directive component from angular 2 to angularJS not working as expected
Here is my angular 2 component:
@Component({
selector: '[my-component]',
template:`<ng-content></ng-content>`
})
export class MyComponentClass {
@Input() myComponent: string;
...
This allows me to use angular 2 app as directive for any html tag like:
<div [myComponent]="'my text string'"></div>
<span [myComponent]="'my text string'"></span>
But when using the same downgrade for use in angularJs app:
angular.module('myApp')
.directive('myComponent', downgradeComponent({component: MyComponentClass , inputs: ['myComponent']}) as angular.IDirectiveFactory);
Now this won't work:
<div [myComponent]="'my text string'"></div> // or
<div [my-component]="'my text string'"></div>
Only if I use it as a component like
<my-component [my-component]="'some text'"></my-component>
How did I go wrong? I don't want it to be used as a new html tag, but as a directive that can be added to any html element (directive).
+3
source to share
2 answers
Try using downgradeNg2Component
instead downgradeComponent
:
import {UpgradeAdapter} from 'angular2/upgrade';
import {myComponent} from './my-component.component.ts';
let upgradeAdapter = new UpgradeAdapter();
.directive('myComponent',
upgradeAdapter.downgradeNg2Component(myComponent))
Check out this helpful post !
0
source to share
I came across the same issue and found the word at: https://github.com/angular/angular/issues/16695#issuecomment-336456199
0
source to share