Web
Analytics
Build a responsive Bootstrap 4 Navbar in Angular 5 without jQuery

For Consultation : +91 9887575540

Stay Connected :

Build a responsive Bootstrap 4 Navbar in Angular 5 without jQuery

In this blog, I am demonstrating that how we can create collapsible navbar using Bootstrap and in angular 5 projects without using jquery and popper.js which are also not recommended by angular. To demonstrate it I have created header component where we will create a collapsible navbar of Bootstrap 4 and we will implement collapsible effect without using jQuery.js and popper.js.

Step 1:  installation of Bootstrap 4 and passing the reference of bootstrap into styles.css




Step 2: Create new angular header component

Step 3: Update index.html 

Step 4: Add the following code into header.component.ts

in the above code, I am using show attribute and NGclass directive of angular to manipulate Dom element of collapsable navbar here I am changing the show attribute using custom property navbarOpen and event binding using (click) button event.

Step 5: Run and see the results

Output

angular bootstrap 4




Select your currency