mat-stepper-bar is an Angular component library designed to implement a multi-step navigation interface (stepper) for forms or processes. This stepper component provides an easy-to-use, customizable solution for creating wizards or complex forms that require user input across multiple steps.
To install mat-stepper-bar in your Angular project, use npm:
npm install mat-stepper-bar --saveImport the MatStepperModule in your Angular application module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatStepperModule } from 'mat-stepper-bar'; // Import the stepper module
@NgModule({
imports: [
CommonModule,
MatStepperModule, // Register the module
],
exports: [MatStepperModule],
})
export class AppModule {}Add the mat-stepper component to your HTML. Each step of the process should be wrapped in *stepperSection, and you can define a custom template for the stepper's progress bar and controller:
<!-- Main stepper component -->
<mat-stepper *ngIf="startStepper">
<h1 stepper-heading>Step-by-Step Process</h1>
<!-- Step 1: Sample Form Section -->
<app-sample-form [onSaveClicked]="currentStep === 1" (formData)="handleFormData($event)" *stepperSection>
<div class="space-after">
<small><span class="text-red">*</span> Required field</small>
</div>
</app-sample-form>
<!-- Step 2: Sample Data Section -->
<app-sample-data [onSaveClicked]="currentStep === 2" (dataFormData)="handleDataForm($event)" *stepperSection>
<div class="space-after">
<small><span class="text-red">*</span> Required field</small>
</div>
</app-sample-data>
<!-- Additional steps here... -->
<!-- Progress Bar Template -->
<ng-template #progressbar let-current>
<div class="col-md-6 col-left">
<span class="pull-left">
<p><b>{{ ( [current, 'sectionName'] | getSectionData ) }}</b> <small>{{ ( [current, 'percentage'] | getSectionData ) }}</small></p>
</span>
</div>
<div class="col-md-6 col-right">
<span *ngIf="current === 4" class="pull-right">
<button class="btn btn-bg">Add Locations</button>
</span>
</div>
</ng-template>
<!-- Stepper Controller Template -->
<ng-template #controller let-selected let-ctrl="controller">
<button id="cancel-action" class="btn btn-outline">Cancel</button>
<button (click)="ctrl.prev()" class="btn btn-outline">Back</button>
<button *ngIf="!(selected === 8 || selected === 9)" (click)="saveAndContinue(ctrl, selected)" class="btn btn-bg">Save & Continue</button>
<button id="complete-button" *ngIf="selected === 8 || selected === 9" (click)="submit()" class="btn btn-bg">Complete</button>
</ng-template>
</mat-stepper>Using MatStepperComponent:
In your component's TypeScript file, handle the necessary logic for form data, navigation control, and integration of the MatStepperComponent:
import { Component, ViewChild, Output, EventEmitter } from '@angular/core';
import { MatStepperComponent } from 'mat-stepper-bar'; // Import the mat-stepper component
@Component({
selector: 'app-stepper-process',
templateUrl: './stepper-process.component.html',
styleUrls: ['./stepper-process.component.css'],
})
export class StepperProcessComponent {
sel = 4; // Current selection step index
currentStep: number; // Stores the active section index
@ViewChild(MatStepperComponent) stepperComponent: MatStepperComponent; // Reference to the stepper component
@Output() cancelProcess: EventEmitter<string> = new EventEmitter(); // Event emitter for canceling the process
isFormValid: boolean = false; // Flag to track if the form is valid
startStepper: boolean = false; // Flag to start the stepper process
// Form data models
sampleFormData: any;
sampleDataForm: any;
constructor() {}
// Method to start the stepper process
startStepperProcess(event): void {
if (event) {
this.startStepper = true;
}
}
// Method to cancel the stepper process
cancelStepperProcess(event): void {
if (event === 'process-cancelled') {
// Handle cancellation logic here
}
}
// Submit form data
submit(): void {
console.log('submit clicked');
}
// Handle the Save & Continue action
saveAndContinue(ctrl, selected): any {
if (selected === 1) {
ctrl.next();
return;
}
this.currentStep = selected;
if (!this.isFormValid) {
return;
}
// Submit form data for different steps
if (selected === 1) {
// Logic to handle form submission for Step 1
console.log('Form data submitted for Step 1');
ctrl.next(); // Move to the next step
}
if (selected === 2) {
// Logic to handle form submission for Step 2
console.log('Form data submitted for Step 2');
}
}
// Handle form data from sample form section
handleFormData(event): void {
if (event) {
this.sampleFormData = event;
this.isFormValid = true;
}
}
// Handle data form submission
handleDataForm(event): void {
if (event) {
this.sampleDataForm = event;
this.isFormValid = true;
}
}
}Users can navigate through multiple sections by clicking "Next" or "Back" buttons. The active section and the progress bar are updated accordingly.
Customize the appearance and behavior of the progress bar and controller using Angular templates (ng-template).
Each section can contain custom Angular components or HTML content, making it easy to implement complex forms.
You can customize the behavior and style of the stepper by modifying the CSS and using additional input properties such as moveTo, canNavigate, and more. Please refer to the source code and Angular documentation for further customization options.
The mat-stepper-bar component provides an easy-to-integrate, customizable solution for managing multi-step processes in Angular applications. Whether it's for onboarding, account creation, or complex forms, this stepper component is a flexible and reliable tool to enhance the user experience.
For the license details, please email us at ngmicroapp@gmail.com
Note this component is free for 3 months.