Angular 6 and bootstrap 4 navbar dropdown not working

[yannick dupire]

Hi,

I'm trying to insert a navbar bootstrap menu using angular.

I already installed bootstrap with mpm.

But when i try click on a dropdown header, i'm redirected to # instead of open the sub menu.... 

It seems that it's like angular handle the href="#" as a link. 

May be i missed something... 

Here my navbar code.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#"><img src="assets/logo.png" class="img-responsive"></a>

<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 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">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Patient

</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#">Action</a>

<a class="dropdown-item" href="#">Another action</a>

<div class="dropdown-divider"></div>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

<!--<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>-->

<li class="nav-item">

<a class="nav-link dropdown-toggle" href="#" id="na"><i class="fa fa-user fa-2x"></i> <i class="fa fa-fw fa-power-off"></i></a>

</li>

</ul>

</div>

</nav>

<div class="container">

<router-outlet></router-outlet>

</div>

[Sander Elias]

Hi Yannick,

I have no clue as I'm not using the bootstrap provided JS. I would just drop the whole `href="#"` attribute, as it doesn't make sense. You are probably right that Angular is picking it up as a link, you can add a `target="_self"` attribute (iirc) to skip this behaviour.

Regards

Sander

[Shree B]

Hi,

I'm facing a similar issue, did you get a solution? I've included Bootstrap.min.js manually from CDN in index,html but that even doesn't work. And i could see this error msg in console log:

Uncaught TypeError: Cannot convert object to primitive value

    at RegExp.test (<anonymous>)

    at HTMLDivElement.<anonymous> (bootstrap.min.js:6)

    at Function.each (jquery.js:381)

    at jQuery.fn.init.each (jquery.js:203)

    at jQuery.fn.init.a._jQueryInterface [as collapse] (bootstrap.min.js:6)

    at HTMLDivElement.<anonymous> (bootstrap.min.js:6)

    at Function.each (jquery.js:381)

    at jQuery.fn.init.each (jquery.js:203)

    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)

    at HTMLDocument.dispatch (jquery.js:5429)

[Amburi Roy]

[Angular] Profiling and Benchmarking in Angular 6

How to do profiling and benchmarking in Angular 6 to do optimization and security?