Angular Material Nav Bar Set Default Active Item

Question

I am experimenting with an angular app using Angular Material and cannot seem to get my navbar to set the default item to be selected. I am using the Angular Material Navbar (Directive Info) for displaying my views and here is my template html for the navbar:

<!-- 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 am setting up the currentNavItem to 'home' which should correspond to my md-nav-item named home which I felt should set it to 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 doesn't make my list item selected by default when I load the app.

Edit

The issue in my case was that my controller was not being used in the navbar selection `md-selected-nav-item="$ctrl.currentNavItem"'. Adding values for each md-nav-item didn't seem to affect the active item setting.

score 2 · Accepted Answer · edited Apr 17 '19 at 20:36

2

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

Markup

<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";
        }
    );

edited Apr 17 '19 at 20:36

Christian Læirbag

230
4
16

answered Sep 10 '16 at 09:59

camden_kid

12,591
11
52
88

I updated my code and also noticed that I was missing my controller syntax for `md-selected-nav-item="$ctrl.currentNavItem"` which after changing seemed to work however for some reason the active item styling isn't rendering properly. Maybe a caching issue? I'm not providing any css anywhere for the header. I'll update my original post with what I'm getting rendered. – user3786596 Sep 10 '16 at 15:21
@user3786596 I think I answered your original question. Perhaps it's better to create another question regarding the styling issue, for future readers. – camden_kid Sep 10 '16 at 15:39
'value' is not a recognized attribute for md-nav-item – ricka Feb 02 '17 at 04:15
@ricka use the name attribute instead. Not sure if it changed but it should be name attribute not value – Ronnie Feb 06 '17 at 22:10
"Value attribute is not allowed here" and does nothing – Thomas Stubbe Mar 15 '18 at 10:10

Angular Material Nav Bar Set Default Active Item

1 Answers1