Skip to main content Skip to navigation Skip to search

Angular Components

ClrWizard

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrWizardSize] input md, lg, xl xl Set the size for the wizard modal.
[clrWizardClosable] input true, false true When true it allows the user to close the wizard.
[clrWizardForceForwardNavigation] input true, false false Reset the pages when navigating backwards when true.
[(clrWizardOpen)] two-way true, false Two way binding for the open state of a wizard.
[clrWizardPreventDefaultNext] input true, false Prevents user from moving to next page or closing itself. .
[clrWizardPreventDefaultCancel] input true, false false Prevents wizard from closing when cancel/close buttons are activated.
[clrWizardPreventNavigation] input true, false false When true it prevents wizard from any navigation.
[clrWizardDisableStepnav] input true, false false When true it prevents the stepnav buttons from working.
(clrWizardOnCancel) output n/a n/a Output that emits when wizard is canceled. Combine with clrWizardPreventDefaultCancel to add custom cancel routines for a wizard.
(clrWizardOnFinish) output n/a n/a Output that emits when wizard finishes. Combint with clrWizardPreventDefaultNext to add custom completion routines.
(clrWizardOnReset) output n/a Output that emits when wizard resets.
(clrWizardCurrentPageChanged) output n/a n/a Output that emits when wizard page changes. Use for non-blocking validation. .
(clrWizardOnNext) output n/a n/a Output that emits when wizard moves to next page. Combine with clrWizardPreventDefaultNext to create custom validation/navigation routines.
(clrWizardOnPrevious) output n/a Output that emits when wizard moves to previous page.

Methods

finish(skipChecksAndEmits: boolean):void

Marks wizard as finished.

  • Name Type Description
    skipChecksAndEmits boolean When true, do not emit or run checks before closing the wizard.

forceFinish():void

Mark wizard as finished then run checks and emit outputs.

open():void

Open the wizard.

close():

Close the wizard

toggle():void

Toggle the wizard to the opposite open/closed state.

previous():void

Move the wizard to the previous page.

next(skipChecksAndEmits: boolean):void

Navigate wizard to the next page.

  • Name Type Description
    skipChecksAndEmits boolean When true, do not emit or run checks before navigating to next page.

forceNext():void

Move wizard to the next page without checks or emiting outputs.

cancel():void

Cancel and close the wizard.

checkAndCancel():void

Check for alternate cancel flows on current page and perform cancel if there are none.

goTo(pageId: string):void

Navigate to a specific page.

  • Name Type Description
    pageId string Identifier of the page to navigate to.

reset():void

Reset all wizard pages to incompl= trueete. Navigates wizard to first page.

ClrWizardButton

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrType] input cancel, next, previous, finish, danger 0 Set the type of button.
[clrWizardButtonDisabled] input true, false false Enable or disable the button.
[clrWizardButtonHidden] input true, false false Hide the button from users.
(clrWizardButtonClicked) output n/a n/a Output that emits when there is a button click event.

ClrWizardHeaderAction

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[id] input Any valid id string. wizardHeaderActionIndex: e.g 0, 1, 2... Set a custom id string for the header action.
[title] input any valid string. Set a custom title for the action button.
[clrWizardHeaderActionDisabled] input true, false false Disable the header action button..
(actionClicked) output n/a Out put that emits the id of the action button clicked.

ClrWizardPage

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[(clrWizardPageNextDisabled)] two-way true, false false Two way binding that emits when the next page disabled state is changed.
[(clrWizardPagePreviousDisabled)] two-way true, false false Two way binding that emits when the previous page disabled state is changed..
[clrWizardPageHasError] input true, false false True indicates the page (and associated nav button) have error state.
[clrWizardPagePreventDefault] input true, false false Override all actions from the page level. E.g when app needs to use alternative validation.
[(clrWizardPagePreventDefaultCancel)] two-way true, false false Override the cancel action at the page level.
[clrWizardPagePreventDefaultNext] input true, false false Override the forward navigation at the page level.
(clrWizardPageOnCommit) output n/a n/a Output for an event fired when next/finish buttons are clicked.
(clrWizardPageOnLoad) output n/a n/a Output event emitted when page becomes current page.
(clrWizardPageOnCancel) output n/a n/a Page level event that emits when wizard is canceled.
(clrWizardPageFinish) output n/a n/a Output that emits when the page finish button is clicked.
(clrWizardPagePrevious) output n/a n/a utput that emits an event when the previous button is clicked.
(clrWizardPageNext) output n/a Output that emits an event when the next button is clicked.
(clrWizardPageDanger) output n/a n/a Output that emits an event when the danger button is clicked.
(clrWizardPagePrimary) output n/a n/a Output that emits an event when the next, finsih or danger buttons are clicked.
(clrWizardPageCustomButton) output n/a n/a Output that emits an event when a custom button is clicked.
[id] input Va;id string. 0, 1, 2... Set a custom id for a wizard page.

Methods

readyToComplete():boolean

A check to see if the next page is disabled

completed():boolean

A getter to check to see if the page is completed

completed(value: boolean):void

Set the page completed state to true/false

  • Name Type Description
    value boolean Boolean for the true/false state.

current():boolean

A check to see if this is the current page active in the wizard.

disabled():boolean

A check to see if this page is disabled

enabled():boolean

A check to see if the page is current, completed and that the previous step was completed.

makeCurrent():void

Makes the page instance the current page in the wizard.

Angular Directives

ClrWizardPageButtons

Selector & Basic Usage

ClrPageHeaderActions

Selector & Basic Usage

ClrWizardPageNavTitle

Selector & Basic Usage

ClrWizardPageTitle

Selector & Basic Usage