How to create collapsible navigation menu in angularJS apps? - angularjs

Question

I am very new to AngularJS and have a menu such as Home/Customer/Account/Other using
the bootstrap navbar component such as
<div class="navbar navbar-default navbar-inner navbar-inverse">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li data-ng-class="{'active':highlight('/home')}"
style="margin-left:1px;">
Home
</li>
<li data-ng-class="{'active':highlight('/customer')}" style="margin-left:1px;">
Customer
</li>
</ul>
</div>
</div>
Once I shrink the window, I get to see the sandwich button. Now, If I click say, Customer menu,I would like
to collapse the menu.
How can I do that? Please help me out.

Answer 1

$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a>
</li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2 (with data-toggle attribute)</a>
</li>
<li>Page3 (without data attributes, just jQuery)
</li>
</ul>
</div>
</div>
</nav>
I'm assuming that you are looking to close your collapsible nav menu when you click any item in the menu. If that's the thing which you are looking for then try this one as you are using bootstrap
<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item </a>
</div>
Bootstrap4
<li>
<a href="#" data-toggle="collapse" data-target=".navbar-
collapse.show">Products</a>
</li>
Using jQuery for bootstrap4
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});