Angular 17, 16 Bootstrap 5 Dropdown Example

To select a dropdown in angular 17,16 with Bootstrap 5; Simply install bootstrap 5 in angular project and create a responsive select dropdown menu using bootstrap 5 components in projects.

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.

Angular 17, 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 projects using bootstrap 5:

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-bootstrap-5-dropdown-example
cd angular-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 Select Dropdown Component

Next, you need to create 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 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 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