Angular MDBootstrap Stepper Component

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:

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:

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

app.component.html

app.component.ts

• app.module.ts:

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:

taran910

Follow

Improve

Article Tags :

• Web Technologies
• AngularJS
• Geeks Premier League
• Geeks-Premier-League-2022
• MDBootstrap