How to Set navbar active class with Bootstrap and AngularJS ?

05 Jan, 2022
To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.
Below example implements the above approach:
Example: This example explain how to set bootstrap navbar active class with AngularJS using ng-controller.
html
<!DOCTYPE html><html lang="en" >  <head>    <meta charset="UTF-8">          <title>        Bootstrap Navbar Change        Active Class Link    </title>          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">          <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>          <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'>    </script>          <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'>    </script>          <style>        body {            margin: 20px;        }        #topheader .navbar-nav li > a {            text-transform: capitalize;            color: #333;            -webkit-transition: background-color .2s, color .2s;            transition: background-color .2s, color .2s;        }        #topheader .navbar-nav li > a:hover,         #topheader .navbar-nav li > a:focus {            background-color: #005596;            color: #fff;        }        #topheader .navbar-nav li.active > a {            background-color: #3990E0;            color: white;        }    </style></head>  <body>    <div id="topheader">        <nav class="navbar navbar-default">            <div class="container-fluid">                <div class="navbar-header">                    <a class="navbar-brand" href="#"                    style="color: green;">GeeksforGeeks</a>                </div>                                  <div class="collapse navbar-collapse"                        id="bs-example-navbar-collapse-1">                    <ul class="nav navbar-nav">                        <li class="active"><a href="#home">                            home</a>                        </li>                        <li><a href="#page1">HTML</a></li>                        <li><a href="#page2">CSS</a></li>                        <li><a href="#page3">JavaScript</a></li>                    </ul>                    <ul class="nav navbar-nav navbar-right">                        <li><a href="#">Front-End</a></li>                    </ul>                </div>            </div>        </nav>    </div>      <script>        $( '#topheader .navbar-nav a' ).on('click',                     function () {            $( '#topheader .navbar-nav' ).find( 'li.active' )            .removeClass( 'active' );            $( this ).parent( 'li' ).addClass( 'active' );        });    </script></body>  </html>
surinderdawra388
Bootstrap-4
Bootstrap-Misc
CSS-Misc
HTML-Misc
JavaScript-Misc
Technical Scripter 2019
AngularJS
Bootstrap
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to align navbar items to the right in Bootstrap 4 ?