navbar not rendering in browser using ng-bootstrap & angular 4

Question

I am building my first Angular 4 app, using ng-bootstrap (Bootstrap 4 for Angular) - not using regular Boostrap

The ng-bootstrap website (https://ng-bootstrap.github.io/#/components/accordion/api) does not list a component for a navbar (as it did in Bootstrap 3 or regular bootstrap 4). Does that mean I have to build a menu out of dropdowns/buttons? Or I have to mix regular Bootstrap 4 with ng-bootstrap?

I tried creating this menu in the html but it won't render in the browser (just a brand "MyWebSiteName" and little grey box on my screen, no nav)

<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>
      <a class="navbar-brand" href="#">MyWebSiteName</a>
    </div>
     <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

I something wrong with this HTML ? Or does someone have an example of a Navbar that works with ng-bootstrap?

yes - and a NgbCheckbox is rendering perfectly, so ng-bootstrap component is working. Just the NAV above isn't — TSG
– TSG, Commented Aug 7, 2017 at 17:35

Dharman · Accepted Answer · 2020-03-21 17:13:32Z

11

As there is no navigation component you'd need to use a combination of the collapse functionality ng-bootstrap's ngbCollapse component as well as the dropdown functionality from the NgbDropdown component.

You'll need to bind an instance of ngbCollapse to the div.collapse.navbar-collapse and a boolean property on your component class. ng-bootstrap doesn't have any use for data-* so you can remove attributes such as data-toggle="collapse".

You control the open/close state of the collapse menu via a property on your component class that gets toggled true/false through something like a click event. In this example is toggle via a (click) event handler on the button.navbag-toggler executing a method on the component toggleMenu() which simply inverts the value of boolean property isCollapsed via the ! operator.

For the menu item dropdown menu, you'd use the NgbDropdown component. You'd apply attributes ngbDropdown and ngbDropdownToggle to the container element and toggle element respectively.

<div class="nav-item dropdown" ngbDropdown>
  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

In terms of styling for Bootstrap 4 navbar, you'll need to use the following classes:

Navbars require a wrapping .navbar with .navbar-toggleable-* for responsive collapsing and color scheme classes.

Also elements such as button.navbar-toggle are now button.navbar-toggler with an "r" in Bootstrap 4. You use classes navbar-inverse and bg-inverse for the standard inverse navbar.

HTML:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" aria-controls="appNavigation" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation" (click)="toggleMenu()">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">My App</a>
  <div class="collapse navbar-collapse" id="appNavigation" [ngbCollapse]="isCollapsed">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link" routerLink="" routerLinkActive="active">Home</a>
      <a class="nav-item nav-link" routerLink="/about" routerLinkActive="active">About</a>
      <div class="nav-item dropdown" ngbDropdown>
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" ngbDropdownToggle>
            Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownBasic1">
          <button class="dropdown-item">Action - 1</button>
          <button class="dropdown-item">Another Action</button>
          <button class="dropdown-item">Something else is here</button>
        </div>
      </div>
    </div>
  </div>
</nav>

TS:

export class NavigationComponent {
  isCollapsed = true;

  constructor() {}

  toggleMenu() {
    this.isCollapsed = !this.isCollapsed;
  }
}

Here is a plunker demonstrating the functionality and styling in action.

edited Mar 21, 2020 at 17:13

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 7, 2017 at 17:42

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Wolf359 Over a year ago

thanks ! This helped a lot. But one question, what would be the best way to add animation to the opening and closing navigation pane ? Like in this demo (animation is done by jQuery) : blackrockdigital.github.io/startbootstrap-logo-nav

Alexander Staroselsky Over a year ago

@MehmetGunacti Animations for collapse and similar components don't seem to be available in ng-bootstrap currently. You'd need to utilize something such Angular - Animations to animate properties of the collapse or CSS3 transitions. I'd avoid attempting to use jQuery.

Mike Glaz Over a year ago

What is the unpkg.com stuff inside index.html? Also, what is the stuff in config.js from? I have the ng-book on Angular 5 and I don't think that's in there...

Alexander Staroselsky Over a year ago

@mikeglaz unpkg is a CDN for npm packages. unpkg is specifically used in the plunker example because it's usually the quickest way pull down necessary dependencies for the sake of a public example/demo. If you create a blank Angular 2+ project in plunker using the built in template, it will automatically generate an index.html with cdn references. In an actual production application you'd be better off using some sort of build process to package all your dependencies in the most efficient way possible. Thanks!

Sergio Morstabilini Over a year ago

Thanks. Maybe it's just me but to make your HTML to work I had to make the following changes: 1 - the link <a class="navbar-brand" href="#">My App</a> should be before the <button>, not after; 2 - in the first line "navbar-inverse bg-inverse" changed to "navbar-light bg-light" 3 - in the first line "navbar-toggleable-md" changed to "navbar-expand-md".

|

Rahul Singh · Accepted Answer · 2017-08-07 19:34:29Z

Instead of Using ng-Bootstrap try using Angular for the same.

Small Example

Template

<nav class="navbar navbar-toggleable-md navbar-light bg-faded  navbar-fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="isActive = !isActive"> // add this for the responsive button
    <span class="navbar-toggler-icon"></span>
  </button>
  <a routerLink="/home"><img src="angular.png" class = "myImage" alt="Image"/></a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass]="{show : isActive}">
    <ul class="navbar-nav">
      <li class="nav-item dropdown" [routerLinkActive]="['active']" appDropdown> // add this directive for the dropdown
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Basic Concepts
        </a>
.....

Directive

 import {Directive, HostListener, HostBinding} from '@angular/core';

  @Directive({
    selector: '[appDropdown]'
  })
  export class DropdownDirective {

    private isOpen:boolean = false;

    @HostBinding('class.open') get opened(){
      return this.isOpen;
    }
    constructor() { }

    @HostListener('click')open(){
      this.isOpen = true;
    }

    @HostListener('mouseleave')close(){
      this.isOpen = false;
    }

Working example of the Same the navbar on top is made using bootstrap and Angular directives Link

Collectives™ on Stack Overflow

navbar not rendering in browser using ng-bootstrap & angular 4

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related