We Keep Coding

Navbar toggle doesn't work in my angular component

Do someone see problem? I tried with replacing position of bootstrap
and jquery imports in this html. This work in online html renderer. Does this have some relation with angular?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-inverse ">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<button class="navbar-toggle" data-target="#navbarToggler" data-toggle="collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="navbar-header">
<a class="navbar-brand">PROJECT</a>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href=""><span
class="glyphicon glyphicon-download-alt"></span>Download</a></li>
<li><a href=""><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
<li><a href="register"><span
class="glyphicon glyphicon-user"></span> Register</a></li>
<li> Logout</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Trigger alert on clicking of second li

I am trying to show alert upon clicking of second li in navigation bar under element homenav. You can checkout the complete code on codepen
var linkButton = document.getElementById('#homenav li:nth-child(2) a');
if(linkButton) {
linkButton.addEventListener('click', function() {
alert('Test');
});
}
HTML
<div id="homenav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Table Ranking
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
</div>
</div>

Document#getElementById takes the ID of the element to locate.
If you want to use a selector, try Document#querySelector:
const linkButton = document.querySelector('#homenav li:nth-child(2) a');
if(linkButton) {
linkButton.addEventListener('click', function() {
alert('Test');
});
}
<div id="homenav">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Table Ranking</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>

Angular 5 sidenav

I'm trying to use a bootstrap side navbar.
<nav id="sidebar" [(class.slide-in)]="slideIn" >
<div class="sidebar-header">
<img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
</div>
<ul class="list-unstyled components">
<p>Content</p>
<li id="sidebar-list" style="border:2px;">
<a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
</li>
<li id="sidebar-list">
Hello World
</li>
<li id="sidebar-list">
Data Binding
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<button (click)="toggleSidebar()" style="margin:0px;border-radius: 0px; height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>MENU</span>
</button>
</div>
</nav>
I am toggling the side nav with some js code in tag but the script tag doesnt run in angular 5. How could I toggle it. I thought have some code in my .ts file like
toggleSidebar():void{
}
Im not sure of what to put in it to toggle it. The code to toggle in the script tag is
<script >
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
console.log("HII");
});
});
console.log("HII");
</script>

<nav class="navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<b>
<a class="navbar-brand" href="#">
Title
</a>
</b>
<button type ="button"
class ="navbar-toggle collapsed"
data-toggle ="collapse"
data-target ="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
<li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
<li routerLinkActive="active"><a routerLink="route3">Route3</a></li>
</ul>
</div>
</div>
</nav>
This is from https://bootswatch.com/darkly/

Bootstrap 3 keep menu open and show div

I've built a Nav bar with a profile dropdown (right hand side of menu):
http://www.bootply.com/Rqj51l2VFO
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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" id="myNavbar">
<ul class="nav navbar-nav" <!--style="width:96%" -->>
<li>Open Cases</li>
<li>Closed Cases</li>
<li><a href data-toggle="modal" data-target="#create_case" data-backdrop="true">Raise New Case</a></li>
<li class="active">{$case['object_ref']}</li>
<!-- <li style="float:right;"><span class="glyphicon glyphicon-question-sign"/></li> -->
</ul>
<!-- http://bootsnipp.com/snippets/featured/account-in-navbar -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="menu">
<a href="#" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>{$person['name']}</strong>
<span class="glyphicon glyphicon-chevron-down" style="margin-left: 10px;"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login" style="width: 400px;">
<div class="row">
<div class="col-lg-4">
<p class="text-center"><span class="glyphicon glyphicon-user icon-size" style="font-size: 75px;"></span></p>
<p>Change Photo</p>
</div>
<div class="collapse" id="change_pic">
<p>Hi!</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Email Address</strong></p>
<p class="text-left small">{$person['main_location[email]']}</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<p>Logout</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
When I click the change photo link, I want a Div to open and the menu to stay open so the user can interact with an input that shows I.e the user would enter a URL to the photo they want in the profile.
This works fine but the menu disappears. So I added the following JS so the menu stays:
JS:
$('#menu .dropdown-menu').on({
"click": function(e) {
e.stopPropagation();
}
});
The issue I have is that now the menu stays open - the bootstrap collapse class isn't working to show/hide.
Could anybody explain what I'm doing wrong here please?

Here is one way to keep the dropdown open after click and keep collapse class working to show/hide. ...
add ID to your Change photo button:
<p>Change Photo</p>
use this following function:
$('#change-photo').on('click', function () {
$('#change_pic').toggle();
return false;
});
check it out here: http://www.bootply.com/8Yo0fBXgN9#

Bootstrap 3 scroll spy

Hi I'm trying to get scroll spy working in my navigation but it's not
Here's a link to my site: http://www.saracook.coffeecup.com
Here's how I implemented it:
<body class="body" data-spy="scroll" data-target=".navbar-collapse collapse">
<div class="main">
<!--HOMEPAGE-->
<section id="home_page">
<div class="home_page">
<!--NAVBAR-->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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 class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Seems scrollspy works good, but there is some trouble with prettyPhoto() plugin. Maybe you forget to include javascript for this plugin on the page.