Skip to content
Related Articles

Related Articles

Angular MDBootstrap Stepper Component

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 10 Mar, 2022

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!