angular2-wizard-angular-material/dist/src/wizard.component.metadata.json

This is an Angular2 Form Wizard component. Just like any form wizard. You can define steps and control how each step works. You can enable/disable navigation button based on validity of the current step. Currently, the component only support basic functio

[{"__symbolic":"module","version":3,"metadata":{"WizardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"form-wizard","template":"<md-card>\n    <md-card-title>\n      <ul class=\"nav nav-justified\">\n        <li *ngFor=\"let step of steps\" [ngClass]=\"{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}\">\n          <a (click)=\"goToStep(step)\">{{step.title}}</a>\n        </li>\n      </ul>\n    </md-card-title>\n    <md-card-content>\n      <ng-content></ng-content>\n    </md-card-content>\n    <md-card-actions [hidden]=\"isCompleted\">\n        <button md-button (click)=\"previous()\" [hidden]=\"!hasPrevStep || !activeStep.showPrev\">Previous</button>\n        <button md-button (click)=\"next()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"!hasNextStep || !activeStep.showNext\">Next</button>\n        <button md-button (click)=\"complete()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"hasNextStep\">Done</button>\n    </md-card-actions >\n  </md-card>","styles":[".card { height: 100%; }",".card-header { background-color: #fff; padding: 0; font-size: 1.25rem; }",".card-block { overflow-y: auto; }",".card-footer { background-color: #fff; border-top: 0 none; }",".nav-item { padding: 1rem 0rem; border-bottom: 0.5rem solid #ccc; }",".active { font-weight: bold; color: black; border-bottom-color: #1976D2 !important; }",".enabled { cursor: pointer; border-bottom-color: rgb(88, 162, 234); }",".disabled { color: #ccc; }",".completed { cursor: default; }"]}]}],"members":{"wizardSteps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./wizard-step.component","name":"WizardStepComponent"}]}]}],"onStepChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterContentInit":[{"__symbolic":"method"}],"goToStep":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"WizardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"form-wizard","template":"<md-card>\n    <md-card-title>\n      <ul class=\"nav nav-justified\">\n        <li *ngFor=\"let step of steps\" [ngClass]=\"{'active': step.isActive, 'enabled': !step.isDisabled, 'disabled': step.isDisabled, 'completed': isCompleted}\">\n          <a (click)=\"goToStep(step)\">{{step.title}}</a>\n        </li>\n      </ul>\n    </md-card-title>\n    <md-card-content>\n      <ng-content></ng-content>\n    </md-card-content>\n    <md-card-actions [hidden]=\"isCompleted\">\n        <button md-button (click)=\"previous()\" [hidden]=\"!hasPrevStep || !activeStep.showPrev\">Previous</button>\n        <button md-button (click)=\"next()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"!hasNextStep || !activeStep.showNext\">Next</button>\n        <button md-button (click)=\"complete()\" [disabled]=\"!activeStep.isValid\" [hidden]=\"hasNextStep\">Done</button>\n    </md-card-actions >\n  </md-card>","styles":[".card { height: 100%; }",".card-header { background-color: #fff; padding: 0; font-size: 1.25rem; }",".card-block { overflow-y: auto; }",".card-footer { background-color: #fff; border-top: 0 none; }",".nav-item { padding: 1rem 0rem; border-bottom: 0.5rem solid #ccc; }",".active { font-weight: bold; color: black; border-bottom-color: #1976D2 !important; }",".enabled { cursor: pointer; border-bottom-color: rgb(88, 162, 234); }",".disabled { color: #ccc; }",".completed { cursor: default; }"]}]}],"members":{"wizardSteps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./wizard-step.component","name":"WizardStepComponent"}]}]}],"onStepChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngAfterContentInit":[{"__symbolic":"method"}],"goToStep":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}]}}}}]