Collapsible Navbar Angular 4 Bootstrap 4

angular bootstrap navbar-collapse
bootstrap 4 navbar
angular bootstrap navbar not working
bootstrap 4 navbar right
angular 4 side menu example
ngx-bootstrap navbar
angular navbar routing
add bootstrap to angular

Been struggling for a bit trying to get something working the exact way I want it. I have a Angular Universal App that has a navigation bar (vertical on top) and I want it to be responsive for mobile. I am targeting Bootstrap 4 Alpha 6 and sing ngx-bootstrap to wire it up. However no matter what I do, I cannot get all parts to work as expected.

Here is my template file (no custom styles here)

<div class="pos-f-t fixed-top">
     <nav class="navbar navbar-inverse navbar-toggleable-md">
        <div class="collapse navbar-collapse">
           <a class="navbar-brand" routerLink="">Blog</a>
           <ul class="navbar-nav ml-auto mt-2 mt-md-0">
              <li class="nav-item hidden-lg-down">
                  <a routerLink="/blog" [routerLinkActive]="['router-link-active']" class="list-group-item">Blog</a>
              </li> &nbsp;
              <li class="nav-item">
                  <a routerLink="/about" [routerLinkActive]="['router-link-active']" class="list-group-item">About</a>
              </li> &nbsp;
              <li class="nav-item">
                  <a routerLink="/search" [routerLinkActive]="['router-link-active']" class="list-group-item">Search</a>
              </li> &nbsp;
          </ul>
       </div>
     </nav>
</div>

I have tried a few SO posts as well as MISC walkthroughs in GitHub Issues, but I am not able at this time. On small viewfinders, I want there to be an icon that hides/shows the menu onclick (whether assigning a css class to a div or using something else). The issue that I am running into is that Since I am using Universal, I have no jQuery access, so I assume out of the box Bootstrap Nav will not work. Anyone who can help would be my hero.

I have Used this in my Angular App link

Bootstrap Navbar

 <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">
    <span class="navbar-toggler-icon"></span>
  </button>
   <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass] = "{show : isActive}"> // ngClass used here
    <ul class="navbar-nav">
        <li class="nav-item dropdown [routerLinkActive]="['active']" appDropdown"> // directive used here
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

appDropdown 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;
    }
  }

You can also import third party JS to do this job but if we are using a JS framework why use another but still if you need it you can find it here it has a dedicated question for it link

How to Build a Responsive Bootstrap 4 Navbar in Angular Without , if you ever tried using Bootstrap with Angular you might notice some issues like: 1​. Nav-bar is not toggling in mobile devices. 2. Drop down is not working at all. I had the same problem, I used normal bootstrap 4 rather then ng-bootstrap and this way I don't need to any module in app.module file as well. it works. Below is the script add into angular.json (angular v6) and bootstrap 4+:

Just add in your ts file:

export class HeaderComponent implements OnInit {
    public isCollapsed = true;
    constructor() {
    }
    ngOnInit() {
    }
}

Then In your component.html add (click)="isCollapsed = !isCollapsed" in button

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
    </button>
    <a class="navbar-brand" href="#"><img class="navbar-logo" src="../../assets/images/3.png"></a>
</div>

Then in your div where you have to show collapse item add [ngbCollapse]="isCollapsed"

<div class="collapse navbar-collapse" id="myNavbar" [ngbCollapse]="isCollapsed">

Collapsible Navbar Angular 4 Bootstrap 4, I have Used this in my Angular App link. Bootstrap Navbar <nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">  Stacked collapsible navbar in bootstrap 4. Ask Question Asked 4 years ago. Active 2 years, 1 month ago. Viewed 37k times 15. 4. I would like

#you can use click method in your html and use router navigate in your type script.

#In HTML File
     <a class="nav-link" (click)="onMenuClick('profile')">Profile </a>
#In Type Script file

 onMenuClick(path) {
    $('.navbar-toggler').click();
    this.router.navigate(['/' + path]);

  }

Build a Responsive Navbar Using Angular 5 and Bootstrap 4 , Build a Responsive Navbar Using Angular 5 and Bootstrap 4. A Responsive Nav Bar. A UI that is responsive to device and browser size is  Angular Bootstrap navbar Angular Navbar - Bootstrap 4 & Material Design Angular Bootstrap navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It’s easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.

Use this site for Angular compatible collapsable navbar. It's very easy.

Collapsable Navbar

Angular Navbar, Documentation and examples for Bootstrap's powerful, responsive navigation Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for <​div class="bg-dark p-4"> <h5 class="text-white h4">Collapsed content</h5>  You now have a responsive custom navbar built with Bootstrap 4 and Angular 5. If you are a business owner or a marketer who wants to improve 📈 his or her email deliverability, then you need to

You may find the answer to your issues with this

https://github.com/angular/flex-layout

It gives you a broad layout API for Flex and Media Query manipulation

Navbar · Bootstrap, Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip,  A navigation bar is a navigation header that is placed at the top of the page: With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large

Collapse, With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a  Bootstrap 4 Grid BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples Bootstrap 4 Theme BS4 Basic Template Bootstrap 4 Ref All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip

Bootstrap 4 Navigation Bar, Next, install Bootstrap 4 and jQuery from npm: <div class="collapse navbar-​collapse" id="navbarCollapse"> <ul class="navbar-nav A navigation bar will be created with Bootstrap 4, and we'll use the routerLink directive to  Angular Bootstrap Collapse Angular collapse - Bootstrap 4 & Material Design. It's easy to toggle the visibility of content across your project with a few classes and our TypeScript code.

Styling An Angular Application With Bootstrap, In this blog, I am demonstrating that how we can create collapsible navbar using Bootstrap and Duration: 8:31 Posted: Sep 1, 2018 When you check Bootstrap's navbar on your mobile phone navbar becomes collapsable. Because it has collapse class name. In this example we will show how to turn navbar-collapse wrapper into offcanvas on mobile screens. When you click on hamburger button, collapsible div appears as drawer menu. Steps to make navbar collapse as offcanvas

Comments
  • helpfull posts stackoverflow.com/q/49010282/8632727 and stackoverflow.com/q/48058827/8632727
  • While this does work, the cursor doesn't change to indicate it is a link when hovered. This could probably be fixed with some CSS, but other than that it does function.
  • Sorry to be that guy here, but I asked for help with a particular issue, and you linked me to basically design paradigms. If there are examples of doing what I want in there, I would appreciate direction here, at this point it is a lot to consume.
  • 30 second look at the API docs (github.com/angular/flex-layout/wiki/API-Documentation) and I see this <div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>
  • Nowhere does the OP say they using angular flex-layout, so you really didn't answer the op's question.