Angular 14 Bootstrap 5 Dropdown & Collapsible Responsive Navbar Using ngx-bootstrap-navbar in TS

Welcome folks today in this blog post we will be showing the collapsible responsive navbar in bootstrap 5 using the ngx-bootstrap-navbar library in Angular Using TypeScript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleapp

cd sampleapp

Now we need to install the below libraries using the npm command as shown below

npm i ngx-bootstrap-navbar

And after that you will see the below directory structure of the angular app as shown below

Now we need to go to app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';
import { NgxNavbarModule } from 'ngx-bootstrap-navbar';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, NgxNavbarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

import { BrowserModule } from '@angular/platform-browser';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app/app.component';

import { NgxNavbarModule } from 'ngx-bootstrap-navbar';

@NgModule({

imports: [BrowserModule, BrowserAnimationsModule, NgxNavbarModule],

declarations: [AppComponent],

bootstrap: [AppComponent]

})

export class AppModule {}

Now we need to go to app.component.html file and copy paste the following code

app.component.html

<nav ngxNavbarDynamicExpand class="navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button
    class="navbar-toggler"
    type="button"
    (click)="collapse.toggle()"
    aria-controls="main-nav"
    aria-expanded="false"
    aria-label="Navigáció kapcsoló"
  >
    <span
      class="navbar-toggler-icon d-flex align-items-center justify-content-center"
    >
    </span>
  </button>
  <ngx-navbar-collapse id="main-nav" #collapse="ngxNavbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Some very long Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Some very long Link</a>
      </li>
    </ul>
  </ngx-navbar-collapse>
</nav>

<a class="navbar-brand" href="#">Navbar</a>

<button

class="navbar-toggler"

type="button"

(click)="collapse.toggle()"

aria-controls="main-nav"

aria-expanded="false"

aria-label="Navigáció kapcsoló"

<span

class="navbar-toggler-icon d-flex align-items-center justify-content-center"

</span>

</button>

<ngx-navbar-collapse id="main-nav" #collapse="ngxNavbarCollapse">

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

</li>

</li>

</ul>

</ngx-navbar-collapse>

</nav>

Now we need to go to app.component.ts file and copy paste the following code

app.component.ts

import { Component, DoCheck, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements DoCheck {
  ngDoCheck() {
    console.count('checked');
  }
}

import { Component, DoCheck, ChangeDetectionStrategy } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

changeDetection: ChangeDetectionStrategy.OnPush

})

export class AppComponent implements DoCheck {

ngDoCheck() {

console.count('checked');

}