Add enabling/disabling linear state of demo

angular · Aug 8, 2017 · 2aa0344 · 2aa0344
1 parent e648c0e
commit 2aa0344
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
@@ -83,8 +83,7 @@ export class CdkStep {
   selector: 'cdk-stepper',
   host: {
     '(focus)': '_focusStep()',
-    '(keydown)': '_onKeydown($event)',
-    '[linear]': 'linear',
+    '(keydown)': '_onKeydown($event)'
   },
 })
 export class CdkStepper {
@@ -97,9 +96,7 @@ export class CdkStepper {
   /** Whether the validity of previous steps should be checked or not. */
   @Input()
   get linear() { return this._linear; }
-  set linear(value: any) {
-    this._linear = coerceBooleanProperty(value);
-  }
+  set linear(value: any) { this._linear = coerceBooleanProperty(value); }
   private _linear = false;
 
   /** The index of the selected step. */

diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
@@ -1,6 +1,7 @@
 <h2>Linear Vertical Stepper Demo</h2>
+<md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
 <form [formGroup]="formGroup">
-  <md-vertical-stepper formArrayName="formArray" linear>
+  <md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
     <md-step formGroupName="0" [stepControl]="formArray.get([0])">
       <ng-template mdStepLabel>Fill out your name</ng-template>
       <md-input-container>

diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/demo-app/stepper/stepper-demo.ts
@@ -5,10 +5,11 @@ import {Validators, FormBuilder, FormGroup} from '@angular/forms';
   moduleId: module.id,
   selector: 'stepper-demo',
   templateUrl: 'stepper-demo.html',
-  styleUrls: ['stepper-demo.scss'],
+  styleUrls: ['stepper-demo.scss']
 })
 export class StepperDemo {
   formGroup: FormGroup;
+  isNonLinear = false;
 
   steps = [
     {label: 'Confirm your name', content: 'Last name, First name.'},