Open In App

Angular MDBootstrap Stepper Component

Improve
Improve
Like Article
Like
Save
Share
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

 

Reference: https://mdbootstrap.com/docs/angular/components/stepper

 



Last Updated : 10 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads