AngularJs - ng-class not working

Question

AngularJs - ng-class not working

1.8k Views Asked by Anushka Weerasekarage At 21 June 2018 at 18:41

I'm new to Angular and still learning. I've created 'header.html' file and include it in my other html files using 'ng-include'. inside my 'header.html', I have a nav bar and I want nav bar links active with the active page. i tried hard and still couldn't get done. much appreciate if someone could help me to figure this out. thanks.

header.html

<body ng-app="headerModule">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup" ng-controller="headerContr">
            <div class="navbar-nav">
                <a class="nav-item nav-link ng-class:{ active: isActive('/index.html')};"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>
                <a class="nav-item nav-link ng-class:{ active: isActive('/aboutus.html')};"  href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About Us</a>
                <a class="nav-item nav-link ng-class:{active: isActive('/contactus.html')};" href="./contactus.html"><span class="fa fa-address-book fa-lg"></span> Contact us</a>
            </div>
        </div>
    </nav>
    <header class="jumbotron jumbotron-fluid">
        <div class="container fluid">
           <div class="row">

            </div>
        </div>
    </header>

app.js

var angApp = angular.module('angApp', []);
var headerModule = angular.module('headerModule', []);

headerModule.controller('headerContr', ['$scope', '$location', function($scope, $location){
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}]);

Original Q&A

There are 2 best solutions below

**NSTuttle** · Answer 1 · 2018-06-21T18:46:08.280000

There are two ways to use ng-class in the HTML:

As an attribute - <p ng-class='{"active" : isActive(params)}'></p>
As CSS class- <p class='ng-class: isActive(params)'></p>

The first evlas the expression and sets the class active if true.

The second simply takes the returned value of the expression and sets it as a class, so if isActive() returnes active, that class would be used.

NgClass Documentation

This is a valid method for NgClass. It may be because you have added the {} into the ng-class: definition as well as passing more than an expression.

Try removing the {} from each instance like so and updating the isActive method to return active (the active class) if true and '' (blank) if false:

<div class="navbar-nav">
  <a class="nav-item nav-link ng-class: isActive('/index.html')"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>
  <a class="nav-item nav-link ng-class: isActive('/aboutus.html')"  href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About Us</a>
  <a class="nav-item nav-link ng-class: isActive('/contactus.html')" href="./contactus.html"><span class="fa fa-address-book fa-lg"></span> Contact us</a>
</div>

$scope.isActive = function (viewLocation) { 
   if(viewLocation === $location.path()) return 'active';
   else return '';
};

OTHER OPTION:

I recommend using the attribute Usage of NgClass. Try to pull it out of the class attribute and use it as it's own attribute.

<body ng-app="headerModule">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
               <a class="navbar-brand" href="#">Navbar</a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup" ng-controller="headerContr">
                      <div class="navbar-nav">
                        <a class="nav-item nav-link" ng-class="{ active: isActive('/index.html')}"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>
                        <a class="nav-item nav-link" ng-class="{ active: isActive('/aboutus.html')}"  href="./aboutus.html"><span class="fa fa-info fa-lg"></span> About Us</a>
                        <a class="nav-item nav-link" ng-class="{active: isActive('/contactus.html')}" href="./contactus.html"><span class="fa fa-address-book fa-lg"></span> Contact us</a>
                    </div>
                    </div>
            </nav>
            <header class="jumbotron jumbotron-fluid">
                <div class="container fluid">
                    <div class="row">

                    </div>
                </div>
            </header>

**Matej Marconak** · Answer 2 · 2018-06-21T21:01:20.873000

I think you have problem with syntax:

<a class="nav-item nav-link ng-class:{ active: isActive('/index.html')};"  href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>

ng-class must be attribute, not embedded in class attribute .

<a class="nav-item nav-link" ng-class="{ active: isActive('/index.html')};" href="./index.html"><span class="fa fa-home fa-lg"></span> Home</span></a>

AngularJs - ng-class not working

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in NG-CLASS

Related Questions in ANGULARJS-NG-INCLUDE

Trending Questions

Popular # Hahtags

Popular Questions