Hide/Show navigation buttons

maiyaporn · Feb 12, 2017 · 90791fa · 90791fa
1 parent 0afc0aa
commit 90791fa
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/README.MD b/README.MD
@@ -101,12 +101,8 @@ $ npm run lint
 ```
 
 ## Improvement
-Click title to navigate
-Hide/Show button
-Disable visited steps after navigate to previous
-Dynamically add/remove step
-- [ ] Click title to navigate
-- [ ] Hide/Show navigation button
+- [x] Click title to navigate
+- [x] Hide/Show navigation button
 - [ ] Disable visited steps after navigate to previous
 - [ ] Dynamically add/remove step
 

diff --git a/src/wizard-step.component.ts b/src/wizard-step.component.ts
@@ -12,13 +12,16 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 export class WizardStepComponent implements OnInit {
   @Input() title: string;
   @Input() isValid: boolean = true;
-  private _isActive: boolean = false;
-  isDisabled: boolean = true;
+  @Input() showNext: boolean = true;
+  @Input() showPrev: boolean = true;
 
   @Output() onNext: EventEmitter<any> = new EventEmitter();
   @Output() onPrev: EventEmitter<any> = new EventEmitter();
   @Output() onComplete: EventEmitter<any> = new EventEmitter();
 
+  private _isActive: boolean = false;
+  isDisabled: boolean = true;
+
   constructor() { }
 
   ngOnInit() {
@@ -33,5 +36,4 @@ export class WizardStepComponent implements OnInit {
     return this._isActive;
   }
 
-
 }
diff --git a/src/wizard.component.ts b/src/wizard.component.ts
@@ -16,8 +16,8 @@ import { WizardStepComponent } from './wizard-step.component';
       <ng-content></ng-content>
     </div>
     <div class="card-footer" [hidden]="isCompleted">
-        <button type="button" class="btn btn-secondary float-left" (click)="previous()" [hidden]="!hasPrevStep">Previous</button>
-        <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" [hidden]="!hasNextStep">Next</button>
+        <button type="button" class="btn btn-secondary float-left" (click)="previous()" [hidden]="!hasPrevStep || !activeStep.showPrev">Previous</button>
+        <button type="button" class="btn btn-secondary float-right" (click)="next()" [disabled]="!activeStep.isValid" [hidden]="!hasNextStep || !activeStep.showNext">Next</button>
         <button type="button" class="btn btn-secondary float-right" (click)="complete()" [disabled]="!activeStep.isValid" [hidden]="hasNextStep">Done</button>
     </div>
   </div>`