ng2: uiSrefActive error

[christopherthielen]

From @kolkov on September 8, 2016 11:10

<li class="nav-item btn-group" ngbDropdown>
          <a class="dropdown-toggle nav-link" role="button" ngbDropdownToggle>Profile <span class="tag tag-pill tag-default">44</span></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.messages" uiSrefActive="active">Messages <span class="tag tag-pill tag-default">42</span></a>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.polling" uiSrefActive="active">Polling <span class="tag tag-pill tag-default">2</span></a>
            <div class="dropdown-divider"></div>
            <div class="dropdown-header">Advanced</div>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile" uiSrefActive="active">Profile</a>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.settings" uiSrefActive="active">Settings</a>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.password" uiSrefActive="active">ChangePassword</a>
          </div>
</li>

When we click on private.profile.password:

1. private.profile => active
2. private.profile.password => active

but in this case if clicked on private.profile.password:

<li class="nav-item btn-group" ngbDropdown>
          <a class="dropdown-toggle nav-link" role="button" uiSref="private.profile" uiSrefActive="active" ngbDropdownToggle>Profile <span class="tag tag-pill tag-default">44</span></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.messages" uiSrefActive="active">Messages <span class="tag tag-pill tag-default">42</span></a>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.polling" uiSrefActive="active">Polling <span class="tag tag-pill tag-default">2</span></a>
            <div class="dropdown-divider"></div>
            <div class="dropdown-header">Advanced</div>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.person" uiSrefActive="active">PersonProfile</a>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.settings" uiSrefActive="active">Settings</a>
            <a class="dropdown-item" (click)='isCollapsed = true' uiSref="private.profile.password" uiSrefActive="active">ChangePassword</a>
          </div>
</li>

only private.profile is active, but private.profile.password is not active. Is this correct?

Copied from original issue: angular-ui/ui-router#2980

[christopherthielen]

From @kolkov on September 8, 2016 12:17

Oh-ah! It's because state changes when I click to the dropdown button... But how can I highlight active state element parent without changing state at click?

[christopherthielen]

From @kolkov on September 8, 2016 13:14

UISrefActiveEq - and what about this?
link to doc

[claudiuconstantin]

'link to doc' is dead now :(

[christopherthielen]

@claudiuconstantin

https://ui-router.github.io/ng2/docs/latest/modules/directives.html
https://ui-router.github.io/ng2/docs/latest/classes/directives.uisrefactive.html

[kolkov]

Now this worked for me.

<li class="nav-item dropdown" uiSrefActive="active" ngbDropdown>
          <a class="nav-link dropdown-toggle" style="cursor: pointer;" role="button" id="dropdownBasic1" ngbDropdownToggle>{{'NAVBAR.SETTINGS' | translate}}</a>
          <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownSettings">
            <a class="dropdown-item" uiSrefActive="active" uiSref="devices">Equipment</a>           
          </div>
</li>

[christopherthielen]

working now? nice.