With Angular 4, in order to make the hamburger icon collapsible, we need to get familiar with Ng-Bootstrap, developed by the Angular team. You will be using it frequently. So if you haven’t installed it. It’s definitely a must have.
To install:
npm install — save @ng-bootstrap/ng-bootstrap
After ng-bootstrap is installed. In app.module.ts:
import { NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;
And under @NgModule, imports: [NgbModule.forRoot(), …]
The functionality that we are going to use from ng-bootstap is [ngbCollapse] and here is a navbar example:
For people who came from Angular 1.* world, notice line 2 and line 6. The <div> at line 6 basically means: if isCollapsed equals to true, then everything from that div is hidden from the user.
In the nav.component.ts file, we declare the isCollapsed variable and set to true as default:
Now this Navbar is collapsible, let’s look at how to style the hamburger icon.
How to style hamburger icon?
In my code example, I’m using class= “navbar-inverse” in line 1 of nav.component.html. And this means the hamburger icon is designed to be used by a dark/black nav bar background. Like below:
There is also class= "navbar-light” for a light/white nav bar background.
If you want a customer theme for the 3 lines and border, there is a codePen example where it shows you how to turn your hamburger icon PINK!
I hope this helps anyone who is wondering how to make a nav bar collapsible in Angular 4 and how to make style changes to the hamburger icon.
