Angular Material Nav Bar Set Default Active Item

Question

I am experimenting with an angular application using Angular Material and cannot force my navigator to set the default item selected. I am using Angular Material Navbar ( Directive Information ) to display my views, and here is my html template for the navigator:

<!-- Navbar --> <md-content class="md-padding"> <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> <md-nav-item md-nav-sref="layout.home" name="home">Home</md-nav-item> <md-nav-item md-nav-sref="layout.gallery" name="gallery">Gallery</md-nav-item> <md-nav-item md-nav-sref="#" name="page3">Page Three</md-nav-item> </md-nav-bar> </md-content> 

In my controller, I set currentNavItem to "home", which should match my md-nav-item named home, which in my opinion should be selected based on md-selected-nav-item="currentNavItem"

 export default class HeaderController { constructor($log) { Object.assign(this, { $log, }); this.currentNavItem = 'home'; } $onInit() { this.$log.debug('HeaderController.$onInit'); this.$log.debug(this.currentNavItem); } } 

Any help would be appreciated as to why this does not make my list item selected by default when the application loads.

Edit

In my case, the problem was that my controller was not used in choosing navbar `md-selected-nav-item =" $ ctrl.currentNavItem "'. Adding values ​​for each md-nav element does not seem to affect the setting of the active element.

Answer 1

You need to set the value attribute of each md-nav-item - CodePen

extra charge

 <div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp"> <!-- Navbar --> <md-content class="md-padding"> <md-nav-bar md-selected-nav-item="vm.currentNavItem" nav-bar-aria-label="navigation links"> <md-nav-item md-nav-sref="layout.home" name="home" value="home">Home</md-nav-item> <md-nav-item md-nav-sref="layout.gallery" name="gallery" value="gallery">Gallery</md-nav-item> <md-nav-item md-nav-sref="#" name="page3" value ="page3">Page Three</md-nav-item> </md-nav-bar> </md-content> </div> 

Js

 angular .module ( 'MyApp', ['ngMaterial', 'ngMessages'] ) .controller ( 'AppCtrl', function() { this.currentNavItem = "home"; } );