mat-stepper-bar

mat-stepper-bar Documentation

Overview

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.

Features

• Multi-step navigation: Allows users to navigate through steps with "Next" and "Back" buttons.
• Customizable Progress Bar: Displays the current step and overall progress of the process.
• Modular Design: Easily integrates into any Angular application.
• Support for dynamic content: Load different content or sections dynamically for each step.
• Event handling: Supports navigation control and custom actions for each step.
• Customizable Controller Buttons: Includes custom buttons for each step, allowing for actions like saving, submitting, or moving to the next step.

Installation

To install mat-stepper-bar in your Angular project, use npm:

npm install mat-stepper-bar --save
Usage
Basic Setup
1. Import the Module
Import 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 {}
2. Add the Stepper to Your Component
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> &nbsp; <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>
TypeScript Integration
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;
    }
  }
}
Key Features
Stepper Navigation:
Users can navigate through multiple sections by clicking "Next" or "Back" buttons. The active section and the progress bar are updated accordingly.

Custom Templates:
Customize the appearance and behavior of the progress bar and controller using Angular templates (ng-template).

Dynamic Content:
Each section can contain custom Angular components or HTML content, making it easy to implement complex forms.

Methods & Events
startStepperProcess(event):
Starts the stepper process when the event is triggered (e.g., when the user clicks a "Start" button).

cancelStepperProcess(event):
Handles the cancellation of the stepper process.

saveAndContinue(ctrl, selected):
Validates the current section's data and moves to the next step.

submit():
Submits the final data after completing the steps.

handleFormData(event):
Collects data from the sample form section.

handleDataForm(event):
Collects data from the sample data section.

Advanced Configuration
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.

Conclusion
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 further documentation, examples, or to contribute, feel free to explore the repository and raise any issues or pull requests.

License
For the licence details, please email us at [e-mail]
Note this component is free for 3 months and should be licensed after 3 months of use.