@Input gets the variable name from AngularJS

Question

I am trying to migrate my AngularJS app to Angular.

I have some components with bindings which needs to be converted to Angular

AngularJS Code:

<my-comp test="test.data" otherData="test.otherData"><my-comp>

my-comp.ts:

export default {
    template: html,
    bindings: {
        test: '<',
        otherData: '=',
    },
}

my-comp.html:

<div ng-repeat="val in $ctrl.test">
    {{ val }}
</div>

output: 1 2 3

Now I have migrated my-comp.ts from AngularJS to Angular

my-comp.ts:

export class MyCompComponent implements OnInit {
    @Input() test: any;
    @Input() otherData: any;
    ngOnInit() {
        console.log('test: ', this.test);  // prints "test.data"
        console.log('otherData: ', this.otherData); // prints "test.otherData"
    }
}

my-comp.html:

{{ test }}

Actual output: "test.data"

Expected output: 1 2 3

I am using @Input for bindings with '=' and '<'

I downgrade the updated component so it can be used in AngularJS code in

<my-comp test="test.data" otherData="test.otherData"><my-comp>

without having to write it as

<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>

Update:

Docs

Using NgUpgrade we can use the Angular Component (downgrade) in AngularJS template and pass inputs with [] as regular Angular inputs

<my-comp [test]="test.data" [otherData]="test.otherData"><my-comp>

How do you include your component? Please show the template it's called from. — Jeto, Jan 04 '19 at 14:53
I think you may need brackets, looks like angular is interpreting it as a string. I guess you do where it should be — mchl18, Jan 04 '19 at 14:55

Jeto · Accepted Answer · 2019-01-04T17:47:26.347

2

You need to include your component like this, using square brackets. See Property Binding.

<my-comp [test]="test.data" [otherData]="test.otherData"></my-comp>

edited Jan 04 '19 at 17:47

answered Jan 04 '19 at 14:56

Jeto

14,596
2
32
46

That part of code is still in AngularJS, so I cannot use the [] – Dot Net Dev Jan 04 '19 at 14:57
@dot-net-dev But u cant mix AngularJS and Angular so he have to update the html that the binding works in Angular. – Atomzwieback Jan 04 '19 at 14:58
Are you trying to mix AngularJS with Angular 2+? I doubt that's even possible. Your post suggests you're trying to migrate. – Jeto Jan 04 '19 at 14:59
You could potentially use both bindings: ``. Angular will just ignore the non-bracketed ones. – Tim Klein Jan 04 '19 at 15:00
`bind-test="test.data"` will also work, if that helps. – Jeto Jan 04 '19 at 15:01
I am migrating the application using Ng-Upgrade so, I can run both Angular and AngularJS. Since I have updated my-comp code to Angular, I downgrade it to AngularJS and use it till I migrate all of the code to Angular. – Dot Net Dev Jan 04 '19 at 15:01
Ya you can do this but thats "quick and dirty". You should migrate the whole part to angular and not make a hybridization between AngularJS and Angular – Atomzwieback Jan 04 '19 at 15:01

@Input gets the variable name from AngularJS

1 Answers1