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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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> |
Now we need to go to app.component.ts
file and copy paste the following code
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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'); } } |