Wizard

Component is build based on Angular Material Tabs and Angular animation system

It consists of two components:

• cfWizardComponent

• cfWizardStepComponent

Wizard steps validation system is based on each step isValid property value. This value must be set from some user validation system. If some steps is invalid - all next steps will be invalid.

Usage

app.html

<cf-wizard [properties]="myWizard" [styling]="myWizardStyles">
  <cf-wizard-step *ngFor="let step of steps, let i = index" [properties]="step" [styling]="myWizardStepStyles">
    <h1>Step - {{i+1}}</h1>
  </cf-wizard-step>
</cf-wizard>

app.ts

myWizard = new WizardModel({
    showStepNumberAsIcon: true,
});

myWizardStyles = new WizardStylingModel({
    container: {
        class: "my-custom-wizard"
    },
    nextButton: new ButtonStylingModel({
        button: {
            class: "my-wizard-next-button ",
        }
    })
});

app.scss

/deep/ {
    .my-wizard-next-button.mat-button, .my-wizard-step-header-button.mat-button {
      color: darkblue;
      background: lightseagreen;
    }
}

Wizard input properties

Attr	Type	Details
showStepNumberAsIcon	boolean	If to show step number as icon in wizard header steps buttons
showStepNumberAsPrefix	boolean	If to show step number as prefix in wizard header steps buttons
previousButton	ButtonModel	The ButtonModel object for wizard previous button
nextButton	ButtonModel	The ButtonModel object for wizard next button
finishButton	ButtonModel	The ButtonModel object for wizard finish button

Wizard styling properties

Attr	Type	Details
container	StylingModel	Styling by type StylingModel
previousButton	ButtonStylingModel	Styling by type ButtonStylingModel
nextButton	ButtonStylingModel	Styling by type ButtonStylingModel
finishButton	ButtonStylingModel	Styling by type ButtonStylingModel

Wizard output properties

Attr	Detailsprevious
onStepChanged	Is emiting event with active step after step was changed
onComplete	Is emiting event to inform about finishing wizard steps work

Wizard step input properties

Attr	Type	Details
header	ButtonModel	The ButtonModel object for wizard step header button
isValid	boolean	Property for step valid state

Wizard step styling properties

Attr	Type	Details
header	ButtonStylingModel	Styling by type ButtonStylingModel
iconIndex	StylingModel	Styling by type StylingModel
prefixIndex	StylingModel	Styling by type StylingModel

Wizard step output properties

Attr	Details
onNext	Is emiting event before go to next step
onPrev	Is emiting event before go to previous step