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.
