Install Ng-Bootstrap


In this article, I will show you how to install Ng-bootstrap in angular CLI 6. Basically, Ng-bootstrap used to create interactive UI and graphics for the user. You already know about the bootstrap framework. Bootstrap framework let create responsive website and application. So ng-bootstrap is not different than the bootstrap framework it just the same thing but using ng-bootstrap we implement the angular application. Well, Angular is the most popular language and widespread among the country.

Install Ng-Bootstrap

Being an angular Developer it is very helpful to learn ng-bootstrap. It gives us an amazing User Interface. In this article, we will show you how to install this framework and use this in angular CLI 6. It required angular version 6 or higher. So we are using Angular 6 for this article. we are installing the lasted version of the bootstrap framework.

So let’s get started…

Create Simple Angular App

First, you need to install angular CLI in your directory. Well, I think you are familiar with that if not then follow this instruction.

  • Create an empty folder on the desktop ( you can choose your own location also).
  • Then you need to install Node.js on your local computer. Node.js will help you to install node packages in your system. I wanted to know how to install node.js then you can read this complete guide article.
  • If you read the complete article of above then you get understand how to set up the environment of the angular CLI.
  •  After completing the setup you need an editor for the angular application. So we are using visual code editor here to implement angular Application.
  • After installing cli in the directory open it in the visual code editor. You can use any other editor also but I recommend to use the visual code editor. It is very simple and free.
  • Press Ctrl+~ to open the terminal. Write a code to create the angular application

  • There are two ways to execute this command. First using directly cmd or using the visual code terminal. So there is no any doubt that these are not efferent then each other but choose the simple way.
  • This command will create your angular app and name it ng-bootstrap-app. You are free to change this name with your application name.

 

Install Ng-Bootstrap

To use ng-bootstrap there is no need to add dependencies like Jquery or JavaScript. The requirement is only needed angular CLI or higher and 6 and Bootstrap 4 or higher version. To install ng-bootstrap in your local computer using the terminal or cmd. The best and simple way to install this is using visual code terminal as I showed in the previous topic. Ok, Now let’s see how to install ng-bootstrap and bootstrap 4.0 as a dependency.

First, you need to go inside of your angular directory. So the cd Command will help you to do that. Write this command in the terminal (if you are using cmd then you can use cmd).

In the Angular-app-name text, you want to provide your application name. Just for instance if you created ng-bootstrap-app then execute this command.

This command will get you inside the application directory.

In this command, we install ng-bootstrap in the ng-bootstrap directory. The npm install command is used to install any module in your angular application followed by the name of the module. At the last, we provide the bootstrap module to install. If you install this module already then no worry this will replace the existing module and install the latest one.

You can find these modules in the node_module folder. As we already said, We don’t need to install the Jquery dependency file to use client-side events.

 

Tell Angular to Make use of Bootstrap

This is also the very important point. In the angular.json file, you need to make some changes to tell the angular to use a bootstrap file with style.css. Open angular.json file located in the angular application and edit this file and add this line.

angular.json

You need to find the angular.json file and find the styles script in that file. When you find that just add the bootstrap.min.css file on the second like. Using this code we are telling the bootstrap to use bootstrap.min.css file.

 

Import ng-bootstrap

After installing your module you need to tell angular that recognized this module and apply it in the angular application. What we need to do is we import ng-bootstrap module and specify this module as the root module. Let me show you how to do that.

app.module.ts

You can find this file in the src/app folder. This is the app component module file. You need to import ng-bootstrap in this file. So Follow the steps to import ng bootstrap module.

After that, to make use of this module in the import section of @NgModule annotation write NgbModule.forRoot(). This code will make ng-bootstrap on the top level and you can use it in any component of the application.

So app.module.ts file something looks like this.

If your app.module.ts file was not looked like this then don’t worry we just imported NgbModule on the top and in the import section we specify NgbModule as a root module.

Make Use of ng-bootstrap

Now you can use ng-bootstrap in the angular application. We successfully installed the ng-bootstrap module and imported it in the angular application. Make sure you follow all the steps otherwise it will not possible to use it. It probably generates an error.

Now let us use this module. following few articles are depends on ng-bootstrap. Now we just create a simple accordion using ng-bootstrap. In app.component.ts file import this code.

app.component.ts

So the following code will create an accordion using ng-bootstrap. The final step is to compile your application. Angular Provide a command to compile your application. Write this command in the terminal or cmd. Make sure you are in the angular application directory if not then go inside your application directory using the cd command.

Use this command to go inside of the angular application.

On 4200 port your angular application will be running. You will see we the accordion is created and working fine. That is all for this article. we have shown you how to install ng-bootstrap in angular CLI 6.

We will see you in the next article. If you have any question then comment me in the comment section. To learn more about use Subscribe our Youtube channel.

Leave a Reply

Your email address will not be published. Required fields are marked *