Navbar dropdown not working in Angular 4

Question

Im a very beginner or just started with Angular 4. So as part of learning I tried to create few simple component. So there I tried to have a bootstrap navbar. Here is the code for Navbar

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Test Menu</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 </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">
Has submenu
                    </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" [routerLinkActive]="['active']">
                    <a class="nav-link" [routerLink]="'/engagement']">Engagement</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" dropdownToggle>
                        System
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" *dropdownMenu>
                        <a class="dropdown-item" [routerLink]="['/admin/users']">Manage Users</a>
                        <a class="dropdown-item" [routerLink]="['/admin/servers']">Manage Servers</a>
                        <a class="dropdown-item" [routerLink]="['/admin/logs']">View Application Logs</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

Here is the constructor part

import { Component, OnInit } from '@angular/core';
import { BsDropdownMenuDirective } from 'ngx-bootstrap';
import * as $ from 'jquery';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
    ngOnInit(): void {

    }

}

But in my app component html I used this selector, the menu is showing but the dropdown is not working or its not showing the dropdown part of the dropdown menu.

Here is my app.component.html where Im using the menu

<nav-menu></nav-menu>
<div class='container-fluid'>
  <router-outlet></router-outlet>
</div>

Kindly suggest what should I do to make the dropdown menu to show when we click or mouse over the parent. In this case the Menu Has submenu contains submenu, but its not showing

It's the same as https://stackoverflow.com/questions/17251864, you need to use https://valor-software.com/ngx-bootstrap/#/dropdowns — VahidN, Dec 08 '17 at 10:38

score 0 · Answer 1 · answered Dec 08 '17 at 18:33

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Please add this code to src/index.html file after body tag

score 0 · Answer 2 · answered Mar 21 '18 at 17:30

If you are using angular and mdbootsrap, this is what worked for me:

<li class="nav-item dropdown" dropdown *ngIf="isAuthorized" >
    <a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-effect waves-light clear-bg">
                <span class="nowrap"><i class="fa fa-user"></i>{{displayName}}&nbsp;<span class="caret"></span></span>
    </a>
    <div *dropdownMenu class="dropdown-menu drop-menu-right dropdown dropdown-info dropdown-clear" role="menu">
        <a class='dropdown-item waves-effect waves-light link-item-clear' mdbRippleRadius [routerLink]="['/profile']" href="#" dropdownToggle>Profile</a>
        <a class='dropdown-item waves-effect waves-light link-item-clear' mdbRippleRadius (click)="logout()" href="#" dropdownToggle>Logout</a>
    </div>                      
</li>

Hopefully this helps somebody else. This was much harder to put together than I thought it should be.

Navbar dropdown not working in Angular 4

2 Answers2