ngx-wizard
Simple angular library for creating wizard. For now without styles
Prerequisite
Angular is required. Bootstrap is required.
Installation
npm
npm install ngx-wizard
yarn
yarn add ngx-wizard
Integration
- Install library
- Import Module into the app.module
;
- Also for now bootstrap is needed.
Examples
<!--Any content that you need--><!--other tab--><!--Any content that you need--><!-- Any anounts of tabs -->... component.ts@ViewChild(#wizard) wizard: WizardComponent //you can access properties by using ViewChildanyMethod(): void {wizard.tabs: Array //=> list of active(index must be >= 0) tabs, only avaliable after View Initwizard.activeTab: TabDirective //=> get the activeTab//you can manualy fire nextTabwizard.nextTab(false/*emitContinue*/); //input parameter => set to fire onContinueClicked event}...
Wizard Options
/*Input params*/nextButtonClass: string = "pull-right" //=> will add custom class to the nextButton, default class is "btn btn-next btn-fill btn-wd"prevButtonClass: string = "pull-left" //=> will add custom class to the previousButton, default class is "btn btn-previous btn-fill btn-default btn-wd"nextIconClass: string = "material-icons" //=> will add custom class to the nextButton Icon, default class is "material-icons"nextIconText: string = "arrow_forward" //=> will add custom text to the nextButton Icon, default text is "arrow_forward"prevIconClass: string = "material-icons" //=> will add custom class to the prevButton Icon, default class is "material-icons"prevIconText: string = "arrow_back" //=> will add custom text to the nextButton Icon, default text is "arrow_back""showProgressBar: boolean = false //=> show or hide progress bar, by default it's falseshowHeader: boolean = true //=> show or hide heading tabs, by default it's true
Tab Options
/*Input params*/heading = "string" //=> name of tab that will be displayeddisabled = boolean //=> set enable or disabe tabcustomClass ="string" //=> will add custom class to the headericon = "string" //=> name of icon in the material dashboardpreviousButton ="string" //=> name of previous button, if name is "hidden" then won't show this buttonnextButton ="string" //=> name of next button, if name is "hidden" then won't show this buttonindex = number //=> ordering for tabs, the lowens index wil be at the startactive = boolean //=> manually set the active tabisNextButtonDisabled //=> boolean //=> set enable or disabe nextButtonisPrevButtonDisabled //=> boolean //=> set enable or disabe prevButtonbuttonTemplate //=> ng-template - set custom prev/cont button template/*Output params*/isSelect - EventEmitter<event> //=> fires when tab selecteddeselect - EventEmitter //=> fires when tab deselectedremoved- EventEmitter //=> fires when tab removedcheck - EventEmitter<event> //=> fires when tab checkedonContinueClicked - EventEmitter<event> //=> fires when nextButton clickedonPreviousClicked - EventEmitter<event> //=> fires when prevButton clicked//event has preventDefault method, so if you want to manualy drives the countinue or other buttons you can handle this using preventDefault()
GitHub
Please feel free to declare issues or contribute: https://github.com/AlexYaroschuck/ngx-wizard