Open In App

Angular MDBootstrap Stepper Component

Last Updated : 12 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Stepper Component in Angular MDBootstap. The Stepper Component is used to render the content in steps or milestones. Each followed step is separated & connected with the buttons.

Properties:

  • disableWaves: It allows the user to toggle waves effects.
  • linear: It allows the user to toggle linear mode.
  • vertical: It allows the user to change stepper orientation to vertical.

Syntax:

<ul class="stepper stepper-horizontal">
<li class="completed">
<span>GeeksforGeeks</span>
</li>
</ul>

Approach:

  • Download Angular MDBootstrap from the official site.
  • Extract the files to the current working directory.
  • Install npm in the current project using the following command:
npm install
  • After creating your project folder i.e. appname, move to it using the following command:
cd appname
  • Start the server using the following command:
ng serve

Project Structure: After complete installation, it will look like the following:

Project Structure

Project Structure

Example 1: This is the basic example that illustrates how to use the Stepper component in Angular MDBootstrap.

app.component.html

 


 

 
 


app.component.ts

 


 

 
 


app.module.ts

 


 

 
 


 

Output:


 


 


 

Angular MDBootstrap Stepper Component

Angular MDBootstrap Horizontal Stepper Component


 


 


 

Example 2: This example illustrates how to make a vertical Stepper Component in Angular MDBootstrap.


 


 


app.component.html

 


 

 
 


app.component.ts

 


 

 
 


 

  • app.module.ts:


 


 


 

JavaScript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

 
 

Output:


 

Angular MDBootstrap Stepper Component

Angular MDBootstrap Vertical Stepper Component


 



 



Next Article

Similar Reads