@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>

Answer 1

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

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