Bootstrap collapsible navigation bar not showing links on collapsed window - html

Question

I have a bootstrap collapsible navigation component that, when collapsed, will show the collapsed icon, but when the icon is clicked, will not display the navigation links. Can anyone explain to me why this could be happening?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dropdown-nav" 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 class="small-logo">
<img src="../assets/images/logo_small.png" alt="Logo" />
</div>
</div>
<div class="collapse navbar-collapse" id="dropdown-nav">
<ul class="nav navbar-nav" id="nav-left">
<li class="nav-link dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="glyphicon glyphicon-dashboard"></i>
<span>Dashboards</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-link active" id="dashboard" (click)="handleNavigation($event)">
<i class="glyphicon glyphicon-facetime-video"></i>Fundus Exams
</li>
<li class="dropdown-link" id="exams" (click)="handleNavigation($event)">
<i class="glyphicon glyphicon-camera"></i>Exams
</li>
</ul>
</li>
<li class="nav-link dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="glyphicon glyphicon-list-alt"></i>
<span>Reporting</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-link active" id="results" (click)="handleNavigation($event)">
<i class="glyphicon glyphicon-folder-open"></i>Results
</li>
<li class="dropdown-link" id="report" (click)="handleNavigation($event)">
<i class="glyphicon glyphicon-tasks"></i>Result Report
</li>
</ul>
</li>
</ul>
</div>
</nav>
While the browser window is full sized, the navigation works the way it's supposed to, but doesn't when it's collapsed.
I would like to mention, I am using Angular 2/4 and Bootstrap 3 to develop this application. Could that possibly be what the problem is?

Answer 1

To fix this issue, the only thing I did was, in the TypeScript, added a method which toggles the element when the button is clicked.
showHide(){
$("#dropdown-nav").toggle()
}
<button type="button" class="navbar-toggle collapsed" (click)="showHide()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>