Responsive navbar with angular 2 and bootstrap 4

Question

I am trying to build a web app with a nav bar on the top with some options. However, when the website is view on mobile device, the navbar shrinks and a icon appears for users to press on to show the options. Exactly the behaviour as shown from this website Responsive website

I am using angular 2 with bootstrap 4.

I have tried bootstrap 4 examples but they dont seem to work too well with angular 2 (Dropdown does not work). This is when I found that the angular team has actually been working on their own framework to integrate with bootstrap called ng-bootstrap. However, there is nothing about responsive navbar in there.

Is there a quick and easy way to build such navbar without doing it manually by checking screen size and change things around?

Answer 1

I don't know whether it's still gonna work with Angular 2 but I am using...

• Angular 8
• Bootstrap 4.5

My implementation result as below.

...inside my html template [header.component.html]

<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a routerLink="/" class="navbar-brand">APP_NAME</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="collapsed = !this.collapsed"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      id="navbarSupportedContent"
      [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }"
    >
      <!-- right nav menus -->
      <ul class="navbar-nav ml-auto">
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

...inside my ts component [header.component.ts]

import { Component, OnInit} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"],
})
export class HeaderComponent implements OnInit {

  collapsed = true;

  constructor() {}

  ngOnInit() {}
}

...inside my css [header.component.css]

nav {
  position: sticky;
  top: -2px;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar {
  margin-bottom: 2px !important;
}

I hope this helps. Feedbacks are welcome and appreciated. :)

Answer 2

You can combine Bootstrap with Angular to do this. I'm using Angular 4, but this solution should work with 2 as well. I'm also using Bootstrap 4 (beta) and I know this was a little different if you were using the alpha version.

The markup:

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand/Logo</a>
  <button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation"
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

The component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
})
export class NavBarComponent {
  collapse: boolean = true;

  constructor() { }
}

What we're doing in this solution is getting rid of the Bootstrap collapse plugin and using a really simple version of it done in Angular. We let Bootstrap handle the show/hide of the menu on larger screens while we hide the collapsible menu on smaller screens until the user clicks the toggle button. We do this by using the [hidden] directive in Angular and tying it to a boolean variable called collapse. We toggle collapse when the button is clicked and set it to false when a menu item is selected.

This answer is adapted from an earlier answer (that unfortunately I can't find) someone gave on this same topic a few years ago, but that answer was for Bootstrap 3.x and AngularJS (1.x).