fix(material/stepper): two-way binding for selectedIndex

adds two-way binding for selectedIndex, previously stepper had selectionChange which include selectedIndex & other properties in it fixes #15627
angular · Jun 4, 2023 · 8bb82d8 · 8bb82d8
1 parent 7108734
commit 8bb82d8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
@@ -321,6 +321,9 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   /** Event emitted when the selected step has changed. */
   @Output() readonly selectionChange = new EventEmitter<StepperSelectionEvent>();
 
+  /** Output to support two-way binding on `[(selectedIndex)]` */
+  @Output() readonly selectedIndexChange: EventEmitter<number> = new EventEmitter<number>();
+
   /** Used to track unique ID for each stepper component. */
   _groupId: number;
 
@@ -526,6 +529,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
       : this._keyManager.updateActiveItem(newIndex);
 
     this._selectedIndex = newIndex;
+    this.selectedIndexChange.emit(this._selectedIndex);
     this._stateChanged();
   }
 

diff --git a/tools/public_api_guard/cdk/stepper.md b/tools/public_api_guard/cdk/stepper.md
@@ -115,13 +115,14 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
     set selected(step: CdkStep | undefined);
     get selectedIndex(): number;
     set selectedIndex(index: NumberInput);
+    readonly selectedIndexChange: EventEmitter<number>;
     readonly selectionChange: EventEmitter<StepperSelectionEvent>;
     _stateChanged(): void;
     _stepHeader: QueryList<CdkStepHeader>;
     readonly steps: QueryList<CdkStep>;
     _steps: QueryList<CdkStep>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkStepper, "[cdkStepper]", ["cdkStepper"], { "linear": { "alias": "linear"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "selectionChange": "selectionChange"; }, ["_steps", "_stepHeader"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkStepper, "[cdkStepper]", ["cdkStepper"], { "linear": { "alias": "linear"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "selectionChange": "selectionChange"; "selectedIndexChange": "selectedIndexChange"; }, ["_steps", "_stepHeader"], never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkStepper, [{ optional: true; }, null, null]>;
 }