AngularJS Question

Angular JS Component Binding

I have following component:

(function () {
"use strict";
angular.module("application_module")
.component('tab', {
controller: 'TabCtrl',
templateUrl: 'app/component/application/app-header/tab/tab.html',
bindings: {
'pageName': '<',
'pageNo': '<'
}
});
})();


Its html template:

<md-nav-item md-nav-click="$ctrl.goto($ctrl.pageNo)"
name="$ctrl.pageNo">
{{$ctrl.pageName}}
</md-nav-item>


Its controller:

(function () {
"use strict";

angular.module("application_module")
.controller('TabCtrl', TabCtrl);

function TabCtrl() {
let self = this;
}
})();


I try to use it from the following code:

<tab pageName="EmployeeInfo" pageNo="page1"></tab>


I don't see
pageName
and
pageNo
in final html of rendered page. What is wrong?

Answer

The issue was with camelCase, we used lowcase:

<tab pagename="EmployeeInfo" pageno="page1"></tab> 

and in component:

bindings: {
    'pagename': '@',
    'pageno': '@'
}

And it works ok now.