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();
};
}]);
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>
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>
Related
I have a menu on website. Below is the HTML code.
<header class="navbar navbar-sticky navbar-expand-lg navbar-dark">
<div class="container position-relative">
<a class="navbar-brand" href="./index.html">
<img class="navbar-brand-regular" src="logo.png"/>
<img class="navbar-brand-sticky" src="logo.png"/>
</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-inner">
<!-- Mobile Menu Toggler -->
<button class="navbar-toggler d-lg-none" type="button" data-toggle="navbarToggler" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
On Mobile menu, when i click on a menu item, the menu did not closed. Below is the script code.
Did I miss anything?
// MAIN MENU TOGGLER ICON (MOBILE SITE ONLY)
$('[data-toggle="navbarToggler"]').click(function () {
$('.navbar').toggleClass('active');
$('body').toggleClass('canvas-open');
});
// MAIN MENU TOGGLER ICON
$('.navbar-toggler').click(function () {
$('.navbar-toggler-icon').toggleClass('active');
});
Bootstrap will handle all toggle/collapse by itself you do not need to write extra JS. Toggle button must not duplicate as you did to avoid messing up the navbar functioning.
Below is the answer. I optimized your params in few places. If my answer works for you, please tick it as final answer and upvote it so other people with same problem will get help too. Cheers
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="./index.html"> <img src="#" height="#" width="#"> </a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="navbar-item active"><a class="nav-link" href="./index.html"> Home</a></li>
<li class="navbar-item"><a class="nav-link" href="./aboutus.html">About</a></li>
</ul>
</div>
</div>
</nav>
I have implemented "navbar" in my web application using AngularJS directive. When the user is logged in, it displays the username of the logged in user. But, when I log in as a different user, it still displays the username of the previous user until I manually refresh the window.
Is there any solution to this?
This is the navigation-directive.html
<header class="container" ng-controller="HomeController as vm" ng-init="vm.init()">
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">ABC app</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul ng-if="vm.isLoggedIn()" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#!/homeuser">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#!/myappointments">My Appointments</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">Welcome!<strong> {{vm.loggedInUser}} </strong><i class="fa fa-user-circle-o"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="vm.logout()">Logout</span></a>
</li>
</ul>
</div>
</nav>
</header>
Below is the navigation-directive.js
angular.module('bbms').directive('mhNavigation', mhNavigation);
function mhNavigation(){
return{
restrict: 'E',
templateUrl: 'angular-app/navigation-directive/navigation-directive.html'
};
}
And in my HomeController I am doing
vm.loggedInUser = response.data.username;
I have copied the relevant part from my home controller
Navbar-toggle button was on the top-right both web and mobile mode, but when the navbar collapsed on mobile mode something gone wrong (last pic).
I know it's because my code's line order, but I don't know how to fix it.
Web mode:
Mobile Mode:
Collapsed mobile mode:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">EVENT</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?=$_SESSION['name'];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="login/logout.php">Logout</a>
</div>
</li>
</ul>
</div>
<div class="nav-item" style="float:top">
<input class="btn btn-danger" type="submit" value="Create">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
One way to solve this problem would be:
Put the code for the red button after the navbar brand item in the HTML
Give it the classes ml-auto order-lg-last. The former means "margin-left:auto" and the latter will reorder that button on screens that are large (lg) or larger and put it in the last position. ml-auto will then actually push it to the right.
Give the toggler (that should come after the red button in the HTML) the ml-2 class to get a bit of space between it and the red button.
Click "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">EVENT</a>
<div class="nav-item ml-auto order-lg-last">
<input class="btn btn-danger" type="submit" value="Create">
</div>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?=$_SESSION['name'];?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="login/logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
How to differentiate SPA appearance for Admin and normal user in Angular JS? I did try ng-show to but while refreshing the page the hidden options in menu is visible for a second. Any best practice to separate page fields and options for admin and normal user?
<div class="container navbarcontainer">
<nav class="navbar navbar-inverse" style="z-index: 1;">
<div class="container-fluid" style="padding-right: 12px; padding-left: 12px; font-size: 12px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse scrollable-menu" id="myNavbar">
<ul class="nav navbar-nav showActiveClasss boxyfontmenu">
<li><a ui-sref="home" class="visible-xs bordermenuitem" data-toggle="collapse" data-target=".navbar-collapse"><span class="" id="sp">Home</span></a>
<a ui-sref="home" class="hidden-xs bordermenuitem" id="sp">Home</span></a>
</li>
<li><a ui-sref="ringtones" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Ringtones</span></a>
<a ui-sref="ringtones" class="hidden-xs"><span id="sp">Ringtones</span></a>
</li>
<li ng-show="user.role=='admin'"><a ui-sref="userList" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">User list</span></a>
<a ui-sref="userList" class="hidden-xs"><span id="sp">User list</span></a>
</li>
<li><a ui-sref="contactus" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Contact us</span></a>
<a ui-sref="contactus" class="hidden-xs"><span id="sp">Contact us</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-facebook-square facebook"></i></li>
<li><i class="fa fa-twitter twitter"></i></li>
<li><i class="fa fa-youtube-play youtube"></i></li>
</ul>
</div>
</div>
</nav>
</div>
hide all by default and set style for rules maybe
<li class="hidden-by-default" ng-class="{'hidden-by-default': !isAdmin}"></li>
Set isAdmin in controller with timout to false or when you load the rules from server... it will work by default :D
Note that your initial value should be true for this
Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.