Angular MDBootstrap Stepper Component

Angular MDBootstrap Panels 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>w3wiki</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

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 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 Vertical Stepper Component

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

Tags:

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

Angular MDBootstrap Panels Component

Angular MDBootstrap Stepper Component

Javascript

Contact Us