Javatpoint Logo
Javatpoint Logo

Bootstrap Collapse using Angular 9/8

In this section, we are going to learn about Bootstrap collapse. We will use Angular 9 or Angular 8 to do this. Bootstrap provides the facility of Ng Bootstrap, which also provides the native Angular directives of Bootstrap 3 and Bootstrap 4, such as buttons, tooltip, model, pagination, collapse, datepicker, etc. Bootstrap UI can also be easily used with the help of Ng Bootstrap. In our below example, the collapse will be created, which we will use in our application. To perform Bootstrap collapse in our Angular application, the step by step process is described as follows:

Step 1:

In this step, we are going to Crate New App. The following command will be used to create the new Angular app.

Step 2:

In the second step, we will Install Bootstrap 4. Here, the core package of Bootstrap will be installed. In order to install this, Bootstrap CSS will be used. The following command is used to install this:

When we successfully install it, we have to add the Bootstrap CSS like "node_modules/bootstrap/dist/css/bootstrap.min.css". For this, we will use our angular.json file and add the following code into it:

angular.json

Step 3:

In this step, we are going to Install Ng Bootstrap. Here, the package of Ng Bootstrap will be installed. In order to install this, Bootstrap UI will be used. The following is used to install this:

Step 4:

In this step, we are going to Install the Module. Here, we will use a file named app.module.ts and import the NgModule into it like this:

src/app/app.module.ts

Step 5:

In this step, we are going to Update the View File. Here, our HTML file will be used, and we update that file. In this, we will also create an example of Bootstrap collapse, which is described as follows:

src/app/app.component.html

Step 6:

In this step, we are going to Update the ts File. Here, we will use our app.component.ts file and update that file like this:

src/app/app.component.ts

Now our above code is ready to run. In order to run the above code, we will use the following command:

When we run this command, the following output will be generated:

Bootstrap Collapse using Angular 9/8




Youtube For Videos Join Our Youtube Channel: Join Now

Feedback

  • Send your Feedback to feedback@javatpoint.com

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA