Ngx-bootstrap: feat(navbar): Support for bootstrap navbar

[justin-romano]

When I replaced old bootstrap fir ng2-bootstrap i noticed my navbar menus no longer worked but i could not see an alternative .navbar component to replace it. I just put back the old bootstrap dependencies and it worked again. Feels dirty to have both.
I could not find a workaround to use ng2 bootstrap with navbars. Is this support in the roadmap?

[szh]

I'm having the same issue. According to #188:

ng2-bootstrap doesn't have navbar or popups components as for now

[OBellon]

Any updates?

[Martin-Wegner]

I need the bootstrap navbar as well.

[Dinistro]

@justin-romano @szh @OBellon @Martin-Wegner We currently haven't enough time to implement this but we will take a look at this in the future.

[ginsleepy]

Any updates on this?

[caranzojason]

any update?

[juanitavollmering]

This is a pretty substantial limitation. I would think that adding support for navbar and the collapsed responsive navbar should be very high on the priority list.

[ghost]

Why has no attention been paid to issues regarding the navbar? Has development slowed down or something? Does anybody know of any alternatives to this framework that actually include basic features such as the navbar?

[ghost]

For anybody viewing these issues and looking for a solution, ng-bootstrap looks decent, with support for collapsing navbars already implemented (using an actual Angular 2 directive!). It also looks like it is more actively developed than this framework.

(Not trying to cast shadows on this repo, but some people are genuinely needing an alternative and I would like to help them, 'cause that's what friendly developers who care about their peer's success do).

[Martin-Wegner]

@colindevs ng-bootstrap is only for Bootstrap 4 which is in alpha state and therefore not usable for production.

It also looks like it is more actively developed than this framework.

Please check the number of solved issues and commits here in ng2-bootstrap and rethink your opinion...

[ghost]

"Please check the number of solved issues and commits here in ng2-bootstrap and rethink your opinion..."

@Martin-Wegner
Considering the early stage that ng-bootstrap is in, don't you find it interesting that it has only about 100 less commits than this repo? (548-689) Also, it has closed more than half as many issues as this repo, which, considering its early stage, is impressive. Now click on the "commits" section, you'll see that ng-bootstrap has very recent commits, 2 hours ago in fact. But ng2-bootstrap hasn't been worked on in 4 days...

As far as "early stage" goes, people have been building products with Angular 2 since alpha. Angular Material 2 is in alpha 9 and has even less commits than either of these frameworks, and it is already being used in a lot of places... So I don't think that this will be a problem.

Finally, how does ng2-bootstrap make it to stable release without a basic feature such as the one mentioned in this issue, while ng-bootstrap supports it in its "alpha" stage?

I'm just trying to give people who come to this issue when they realize that something isn't working something else to try out!

[Martin-Wegner]

@colindevs

Considering the early stage that ng-bootstrap

ng-bootstrap is as old as ng2-bootstrap. You can find an issue in both projects which discussed a possible consolidation of both projects...

[ghost]

That is true, I'll leave it at just a suggestion, and acknowledge the flaws
of both frameworks.
On Sep 23, 2016 8:16 AM, "Martin-Wegner" [email protected] wrote:

@colindevs https://github.com/colindevs

Considering the early stage that ng-bootstrap

ng-bootstrap is as old as ng2-bootstrap. You can find an issue in both
projects which discussed a possible consolidation of both projects...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-bootstrap/issues/540#issuecomment-249176650,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMQXCEhqjtIfL4ABGCzDd5cM0-6Bdrfcks5qs8MygaJpZM4Il8sl
.

[Confusedfish]

Lots of complaining going on her but still not clear of the problem. I use ng2-bootstrap and have a navbar with drop down menus, what's the actual problem? Is there a plunkr showing what's wrong? Is this just relating to a menu that changes for mobile / small screens?

[Martin-Wegner]

@Confusedfish the problem occurs on small screens when the menu collapsed to the 3 lines icon.

[Confusedfish]

There is a good example of this already working using the collapse directive here. It just requires a bit or wiring up.

Thanks to Jimmy for that example

[Kris-Simpson]

Hello guys! Any updates here?

[Martin-Wegner]

Workaround:

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
          [attr.aria-expanded]="!isCollapsed" (click)="toggleCollapse()" [ngClass]="{'collapsed': isCollapsed}">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" [ngClass]="{'in': !isCollapsed}">

isCollapsed: boolean = true;

toggleCollapse(): void {
  this.isCollapsed = !this.isCollapsed;
}

https://getbootstrap.com/components/#navbar

[StaticSpark]

http://valor-software.com/ngx-bootstrap/#/collapse
check out the collapse module..

[valorkin]

In v1.6 dropdown directives doesn't add dropdown specific classes, so it could be used with navbar classes to achieve what you need (if you will need append to body it will still add dropdown class to holder)

[PhoneixS]

In Bootstrap 4 you can use class show instead of in:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" [ngClass]="{'show': !isCollapsed}">

[crhistianramirez]

Workaround example in bootstrap 4:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand"
     href="#">Navbar</a>
  <button class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-label="Toggle navigation"
          [attr.aria-expanded]="!isCollapsed"
          (click)="isCollapsed = !isCollapsed">
      <span class="navbar-toggler-icon"></span>
    </button>

  <div class="collapse navbar-collapse"
       id="navbarSupportedContent"
       [ngClass]="{'show': !isCollapsed}">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link"
           href="#">Link One</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           href="#">Link Two</a>
      </li>
    </ul>
  </div>
</nav>

isCollapsed: boolean = true;

https://getbootstrap.com/docs/4.0/components/navbar/

[wmerifield]

navbar is the FIRST component you should have sorted - really dont have time to debug ur bits...moving on! ...nice try :)