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.

Recommended Tutorials