Progress indicator: Steps are undefined

Title

When using the progress indicator component, there is a chance that you will get a this.steps is undefined exception.

Detailed description

Problem

When using the progress indicator in the following way:

<ibm-progress-indicator 
                        [current]="current"
                        [steps]="steps"
>
</ibm-progress-indicator>

The progress indicator throws an exception saying this.steps is undefined.

But when you order the inputs like this:

<ibm-progress-indicator 
                        [steps]="steps"
                        [current]="current"
>
</ibm-progress-indicator>

The exception isn’t thrown.

Reason

I believe the reason for this is that the input current has a setter that references the steps variable. If the inputs are not ordered correctly an exception is thrown.

Solution

I believe a good solution would be to move the setter code to the ngOnChanges lifecycle hook and check there if all the inputs are available before running the code.

What version of the Carbon Design System are you using?

carbon-components: “10.21.0”, carbon-components-angular: “4.19.1”,

[cal-smith]

It only occurs with these Angular versions in the project that I have been working on.

Ah, yeah we’re keeping the project on Angular 7 for now, so it’s totally possible this is a version specific issue. Still worth fixing of course.

Even though the issue does not occur right now I still propose to move the code being executed in the setter to the ngOnInit, where we are sure that all inputs are available, and handle subsequent updates of current in the ngOnChanges.

Seems like a reasonable change to me! We’ve been using the getter/setter pattern with reasonable success, but it’s definitely caused a few headaches as well. I think in this case it might be a bit more future proof if we go with the traditional ngOnInit + ngOnChanges combo.

[Rogier-blip]

I could make a PR for this. Just let me know if this is something you want to fix 😃