How to make navbar tab active or visited based on state using angular ui-router?

Question

I want to make tab active based on current state, I want to set background color for the tab when state is active when user switch tab only visited or current active tab should be highlighted, is it something then can be achieved using ui-router ?

main.html

<nav class="navbar navbar-default">
    <div >
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a ui-sref="app.dit">DIT</a></li>
                <li><a ui-sref="app.st">ST</a>
                <li><a ui-sref="app.uat">UAT</a></li>
                <li><a ui-sref="app.prod">PROD</a></li>
            </ul>
        </div>
    </div>
</nav>

app.js

angular.module('App', [
        'ui.router'

    ]).config(function($stateProvider, $httpProvider, $urlRouterProvider) {
            'use strict'
            $urlRouterProvider.otherwise(function($injector) {
                var $state = $injector.get('$state');
                $state.go('app.dit');
            });

            $stateProvider
                .state('app', {
                    abstract: true,
                    url: '',
                    templateUrl: 'web/global/main.html',
                    controller: 'MainCtrl'
                })
                .state('app.dit', {
                    url: '/dit',
                    templateUrl: 'view/partials/dit.html',
                    controller: 'DitCtrl'
                })
                .state('app.st', {
                    url: '/st',
                    templateUrl: 'view/partials/st.html',
                    controller: 'StCtrl'
                })
                .state('app.uat', {
                    url: '/uat',
                    templateUrl: 'view/partials/uat.html',
                    controller: 'UatCtrl'
                })
                .state('app.prod', {
                    url: '/prod',
                    templateUrl: 'view/partials/prod.html',
                    controller: 'ProdCtrl',
                });

Possible duplicate of How do I implement the bootstrap navbar active class with Angular JS — A.Sharma
– A.Sharma, Commented Sep 13, 2016 at 19:16

Pankaj Parkar · Accepted Answer · 2016-09-13 19:16:14Z

4

You could use ui-sref-active directive with className as its attribute value. So based on current active state it will apply active class over that particular li element.

<nav class="navbar navbar-default">
    <div >
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li ui-sref-active="active"><a ui-sref="app.dit">DIT</a></li>
                <li ui-sref-active="active"><a ui-sref="app.st">ST</a>
                <li ui-sref-active="active"><a ui-sref="app.uat">UAT</a></li>
                <li ui-sref-active="active"><a ui-sref="app.prod">PROD</a></li>
            </ul>
        </div>
    </div>
</nav>

answered Sep 13, 2016 at 19:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make navbar tab active or visited based on state using angular ui-router?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related