.component(
'testComponent',
{bindings: {name:'<'},
template: `{{$ctrl.name}}<br/>
{{$ctrl.title}}<br/>
{{test.name}}<br/>
{{test.title}}<br/>
{{name}}<br/>
{{title}}<br/>`,
controller: function (){
this.name = 'abc';
this.title = 'def';
},
controllerAs: 'test'
})
This code snippet is used to incorporate a new component into a module.
There are total 6 expressions written in the template. Surprisingly, only the second one, $ctrl.title, is functioning correctly while others are not binding properly.
Interestingly, when I eliminate name from bindings, then $ctrl.name also starts working as intended. However, according to my knowledge, all 6 expressions should work cohesively.
Can anyone point out what mistake I made?