I have the 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': '<'
}
});
})();
The html template for this component is as follows:
<md-nav-item md-nav-click="$ctrl.goto($ctrl.pageNo)"
name="$ctrl.pageNo">
{{$ctrl.pageName}}
</md-nav-item>
Here is the controller for the component:
(function () {
"use strict";
angular.module("application_module")
.controller('TabCtrl', TabCtrl);
function TabCtrl() {
let self = this;
}
})();
When I try to use this component with the code below:
<tab pageName="EmployeeInfo" pageNo="page1"></tab>
I'm not seeing the values of pageName and pageNo in the final rendered HTML. What could be the issue?