Angular 16 Bootstrap 5 Dropdown Example

If you want to place a navigation menu in the navbar or home page of web application in your angular web application using Bootstrap 5. Or want to create a dropdown menu on any web page in web application. then this tutorial is for you.

Dropdown in angular 16 using bootstrap 5; Throughout this tutorial, you will learn how to create and use dropdown components in angular 16 projects using bootstrap 5.

Angular 16 Bootstrap 5 Dropdown Example Tutorial

Steps to create navbar dropdown menu, dropdown in home page and any web page of web application and use dropdown menu in angular 16 projects using bootstrap 5:

Step 1: Set Up the Angular Project
Step 2: Install Bootstrap 5
Step 3: Import Bootstrap CSS
Step 4: Create the Dropdown Component
Step 5: Implement the Dropdown in the HTML Template
Step 6: Add Dropdown Component in App Module
Step 7: Use the Dropdown Component in the App Component
Step 8: Run the Application

Step 1: Set Up the Angular Project

First of all, open your cmd or command prompt and execute the following command into it to install and create a new Angular project using the Angular CLI:

ng new angular-16-bootstrap-5-dropdown-example
cd angular-16-bootstrap-5-dropdown-example

Step 2: Install Bootstrap 5

Next, navigate to the project’s root directory and install Bootstrap 5 and its peer dependencies:

npm install [email protected] [email protected]

Step 3: Import Bootstrap CSS

Next, you need to open the angular.json file and add Bootstrap CSS to the styles array:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

Step 4: Create the Dropdown Component

Next, you need to crate dropdown components, so execute the following command cmd for that:

ng generate component dropdown

Step 5: Implement the Dropdown in the HTML Template

Next you need to implement dropdown in the html template.

So, Open the created dropdown.component.html file and add the following code:

<div class="container mt-5">
  <h3>Angular 16 Bootstrap 5 Dropdown Example</h3>
  <div class="dropdown">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button"
      id="dropdownMenuButton"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
    >
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action 1</a>
      <a class="dropdown-item" href="#">Action 2</a>
      <a class="dropdown-item" href="#">Action 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Step 6: Add Dropdown Component in App Module

Now, Open the app.module.ts file (located in the src/app folder) and import the DropdownComponent:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DropdownComponent } from './dropdown/dropdown.component'; // Import the DropdownComponent here

@NgModule({
  declarations: [
    AppComponent,
    DropdownComponent // Add the DropdownComponent to the 'declarations' array
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Use the Dropdown Component in the App Component

Now, you need to open the app.component.html file (located in the src/app folder) and replace its content with the following code:

<div class="container">
  <app-dropdown></app-dropdown>
</div>

Step 8: Run the Application

Finally, execute the following command on cmd to start Angular application:

ng serve

Navigate to http://localhost:4200 in your web browser, and you should see the “Angular Bootstrap Dropdown Example” with a functional dropdown.

Conclusion

That’s it! You have successfully created an Angular 16 Bootstrap 5 dropdown example and can now see it in action. Feel free to further improve it by adding custom styles, handling dropdown item clicks, or integrating it into more complex applications.