Angular and Bootstrap navbar collapse not working?

Question

The navbar collapse is not working on small screens. I click on the button that appears on the right side for the menu, but nothing happens. I have looked up other solutions, and changed my angular.json file.

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Here is my .html code:

<header class="navbar bg-main-bg pt-0 pb-0 mt-0 mb-0" style="z-index: 1000; height: 80px;">
    <nav class="container navbar-expand-md h-100">
        <a class="navbar-brand" href="#" style="margin-right: 120px; height: 50px;">
            <app-coin [width]="50" [height]="50" text="A"></app-coin>
            <h1 class="position-relative text-txt-h" style="line-height: 50px; left: 52px;">LBAR</h1>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarToggler" class="collapse navbar-collapse h-100">
            <ul class="navbar-nav h-100 text-uppercase">
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" routerLink="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/work">Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

However, it still does not seem to work. When the screen shrinks, the links to the pages disappear, and the icon that usually causes the links to appear is not working. I know of the solution where you set the collapse value here, but that does not work either. Is there any way to get the navbar collapse working?

I recommend to use ng-bootstrap when combining Angular and Bootstrap. It will make your life a way easier. — jmac
– jmac, Commented Jul 19, 2022 at 21:29

Adjamir de Moura Galvão · Accepted Answer · 2023-01-11 17:50:41Z

4

Besides the use of ng-boostrap, i had to use the solution provided here https://www.youtube.com/watch?v=m5fdwxB-jIM

In sumary the code must me changed in the html file to:

<button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isCollapsed">

and in the .ts file

  public isCollapsed : boolean = true;

answered Jan 11, 2023 at 17:50

Adjamir de Moura Galvão

515 bronze badges

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

Comments

snowymike · Accepted Answer · 2025-05-21 20:44:54Z

I had the same problem but was using ngx-bootstrap instead of ng-bootstrap.

For anyone in this situation, the code in the answer from 2023 almost works with ngx-bootstrap, you'll just need to change ngbCollapse to collapse. The following worked for me with ngx-bootstrap 12 and Angular 18:

    <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" 
            data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
            [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent" [collapse]="isCollapsed">
    <ul class="navbar-nav me-auto mb-2 mb-sm-0">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Page 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Page 2</a>
        </li>
    </ul>

I also imported CollapseModule in my main module, and added the isCollapsed variable to my component that included the navbar, as in the 2023 answer.

More info on ngx-bootstrap and collapse at https://valor-software.com/ngx-bootstrap/components/collapse?tab=api

Collectives™ on Stack Overflow

Angular and Bootstrap navbar collapse not working?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related