Docs: Material - rollthecloudinc/quell GitHub Wiki

1. Introduction
2. Installation
3. Overview
4. Key Concepts
   • Material Module
   • Responsive Stepper Component
5. Core Components
   • MaterialModule
   • ResponsiveStepperComponent
6. Usage
   • Setting Up Material in Your App
   • Using the Responsive Stepper
7. API Reference
8. Examples
9. Testing

The Angular Material Library enhances Angular applications by providing ready-to-use Material Design components via MaterialModule and a custom-built ResponsiveStepperComponent. The library includes all essential Angular Material components along with support for advanced features like responsive steppers for guided workflows.

Install the library and Angular Material dependencies:

npm install @angular/material @angular/cdk

This library simplifies the integration of Material Design components into Angular applications.

• MaterialModule: A centralized Angular module bundling commonly used Angular Material modules.
• ResponsiveStepperComponent: A custom stepper component that provides vertical/horizontal orientation and responsive design.

The MaterialModule serves as a centralized library module bundling Angular Material components. It makes importing Material components convenient and modular.

The ResponsiveStepperComponent extends Angular Material's built-in MatStepper. It allows switching between horizontal and vertical stepper orientations dynamically, adding enhanced responsiveness. The stepper supports linear progression, custom styling, and step selection.

The MaterialModule bundles Angular Material components and other experimental CDK modules. It also exports the ResponsiveStepperComponent.

Modules Included:

• Basic Modules: Buttons, icons, input fields, etc.
• Advanced Modules: Stepper, drag-and-drop, progressive list, etc.
• CDK Modules: Accessibility, scrolling, stepper, etc.

Features:

• Centralized module simplifies Material imports.
• Reduces boilerplate in application modules.

Configuration Example:

import { MaterialModule } from './material.module';

@NgModule({
  imports: [MaterialModule],
})
export class AppModule {}

The ResponsiveStepperComponent offers a configurable vertical/horizontal step layout. It provides:

• Dynamic Orientation: Switch between vertical and horizontal layouts.
• Step Headers: Configurable clickable/non-clickable headers.
• Events: Emits selectionChange, animationDone, and orientationChange.

Key Inputs:

Key Outputs:

Import the MaterialModule into your application's AppModule to access Angular Material components globally:

import { MaterialModule } from './material.module';

@NgModule({
  imports: [MaterialModule],
  declarations: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add the ResponsiveStepperComponent to any workflow requiring a step-by-step guided experience.

Template:

<responsive-stepper 
    [orientation]="'horizontal'" 
    [linear]="true" 
    (selectionChange)="onStepChange($event)">
</responsive-stepper>

Component Script:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  onStepChange(event: any) {
    console.log('Current Step Changed:', event);
  }
}

Usage Example:

<responsive-stepper 
  [orientation]="'vertical'" 
  [linear]="false" 
  [selectedIndex]="0" 
  (selectionChange)="onStepChange($event)">
</responsive-stepper>

Component Logic:

import { Component } from '@angular/core';

@Component({
  selector: 'app-stepper-demo',
  templateUrl: './stepper-demo.component.html',
})
export class StepperDemoComponent {
  onStepChange(event: any) {
    console.log('Stepper event:', event);
  }
}

Access Material components globally after importing MaterialModule into your application.

<mat-toolbar color="primary">
  <mat-icon>home</mat-icon>
  <span>Angular Material Header</span>
</mat-toolbar>

The ResponsiveStepperComponent has unit tests verifying layout configuration, event emissions, and step selection.

Test Example:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResponsiveStepperComponent } from './responsive-stepper.component';

describe('ResponsiveStepperComponent', () => {
  let component: ResponsiveStepperComponent;
  let fixture: ComponentFixture<ResponsiveStepperComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ResponsiveStepperComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ResponsiveStepperComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create stepper component', () => {
    expect(component).toBeTruthy();
  });

  it('should switch orientation', () => {
    component.orientation = 'vertical';
    fixture.detectChanges();
    expect(component.orientation).toBe('vertical');
  });
});

The Angular Material Library combines the strengths of Angular Material components and custom-built responsive steppers to empower developers with flexible and dynamic UI workflows. By using MaterialModule and ResponsiveStepperComponent, developers can ensure consistent Material Design across their application UI.

For contributions or issues, feel free to reach out!