Components: Stepper should provide an event handling for step changes

[luisfpg]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Add an event that gets triggered when the step changes in the stepper component

What is the current behavior?

There's no such event.

What are the steps to reproduce?

N/A

What is the use-case or motivation for changing an existing behavior?

I work on very dynamic apps. If the data shown in a step depends on the input of a previous step, there should be some event that informs that the step is being activated, so the data can be loaded.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3
Angular material 2.0.0-beta.11
Typescript 2.3.4
Antergos Linux (rolling)
Chromium Browser 61

Is there anything else we should know?

N/A

[crisbeto]

You should be able to use the selectionChange event. It doesn't show up in the docs, because the MdStepper inherits it from the CdkStepper.

[daniele-zurico]

could you please tell us how to use it? there's no documentation as you said

[crisbeto]

It's just an output on the stepper element. E.g. <md-horizontal-stepper (selectionChange)="doSomething($event)"></md-horizontal-stepper>.

[daniele-zurico]

well I just want to move on the next step without that he does any sort of control. Something like:

<md-horizontal-stepper #stepper
                       linear="true"
                       class="forgot-pwd-stepper">
    <md-step #step1>
        <iag-mgmt-step1></iag-mgmt-step1>
        <button (click)="stepper.selectionChange.emit(???)"> Ciao
        </button>
    </md-step>
    <md-step #step2>
        <iag-mgmt-step2></iag-mgmt-step2>
    </md-step>

[crisbeto]

The selectionChange event is emitted by the stepper when the step changes, you're not supposed to emit to it yourself. If you want to change the step programmatically, you can set the selectedIndex.

[daniele-zurico]

I tried selectedIndex as well.

<md-horizontal-stepper #stepper
                       linear="true"
                       class="forgot-pwd-stepper">
    <md-step #step1>
        <iag-mgmt-step1></iag-mgmt-step1>
        <button (click)="stepper.selectedIndex=1"> Ciao
        </button>
    </md-step>
    <md-step #step2>
        <iag-mgmt-step2></iag-mgmt-step2>
    </md-step>
    <md-step>
        <iag-mgmt-step3></iag-mgmt-step3>
    </md-step>
</md-horizontal-stepper>

But it complains:

ERROR TypeError: Cannot read property 'invalid' of undefined at stepper.es5.js:353 at Array.some (<anonymous>) at MdHorizontalStepper.webpackJsonp.../../../cdk/esm5/stepper.es5.js.CdkStepper._anyControlsInvalid (stepper.es5.js:353) at MdHorizontalStepper.set [as selectedIndex] (stepper.es5.js:192) at Object.eval [as handleEvent] (ForgotPwdCmpstComponent.html:52) at handleEvent (core.es5.js:12022) at callWithDebugContext (core.es5.js:13486) at Object.debugHandleEvent [as handleEvent] (core.es5.js:13074) at dispatchEvent (core.es5.js:8615) at core.es5.js:9226 View_ForgotPwdCmpstComponent_0 @ ForgotPwdCmpstComponent.html:52 proxyClass @ compiler.es5.js:15129 webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13426 webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 (anonymous) @ core.es5.js:9230 (anonymous) @ platform-browser.es5.js:2651 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:425 onInvokeTask @ core.es5.js:3881 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:192 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:499 invokeTask @ zone.js:1427 globalZoneAwareCallback @ zone.js:1445 ForgotPwdCmpstComponent.html:52 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 61, nodeDef: {…}, elDef: {…}, elView: {…}}

[jdddog]

You should be able to use the selectionChange event. It doesn't show up in the docs, because the MdStepper inherits it from the CdkStepper.

This should be in the stepper documentation; library users shouldn't have to hunt around Github issues to figure out how to implement common use cases for components (like this one). It makes it seem like the developers haven't implemented the functionality, when in fact they have.

[skeize]

selectionChanged is great for handling successful step changes. Is there a way to identify failed step change attempts?

[vsDizzy]

Looks like now it is selectionChange, notice there is no 'd' at the end.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}