Variable is not updating after callback

Question

updating an array after a callback, the variable value step is not really changing, just in the console. Right now I see not the problem why this is not working.

HTML

 <progress-full [stepChangeCallback]="changeStepCallback">
    <progress-full-step>Introduction</progress-full-step>
    <progress-full-step>Settings</progress-full-step>
    <progress-full-step>Customize</progress-full-step>
  </progress-full>

  <div *ngIf="step[0]">Test 1</div>
  <div *ngIf="step[1]">Test 2</div>
  <div *ngIf="step[2]">Test 3</div>

  <button-group>
    <button label="Next step" onclick="document.querySelector('progress-full').nextStep()">
    </button>
    <button theme="secondary" label="Previous step" onclick="document.querySelector('progress-full').previousStep()">
    </button>
  </button-group>

  <pre>{{step | json}}</pre>

TS

  step = new Array(7).fill(false);
    
  constructor() {
    this.step[0] = true;
  }

  changeStepCallback = (num: number) => {
    this.resetArray();
    this.step[num - 1] = true;
    console.log(this.step);
  }

  resetArray() {
    this.step.fill(false);
  }

After click on the button "Next step"

Could you create a reproducible [stackblitz](https://stackblitz.com/)? — Adam Jenkins, Aug 07 '22 at 10:47
The usual suspect is the change detection — does changing `this.step[num - 1] = true` to `this.step = Object.assign([], this.step, {[num]: true})` fix the behaviour? — skink, Aug 07 '22 at 12:09
@Adam progress-full is a template of the company that I'm working for, so I can not do some stackbliz, or maybe I can extract just that part.... will try. — Pascal, Aug 07 '22 at 12:46
`progress-full` should not be necessary for this as the issue is even with the output of `
{{step | json}}
` (I guess that's what we see on the images in the question). Curious to see the stackblitz though. — skink, Aug 07 '22 at 12:50
As a hint as to what's going wrong - what if you do this inside `changeStepCallback` - `setTimeout(() => { /* existing code */},0)`. Does it work? — Adam Jenkins, Aug 07 '22 at 13:26
[stackblitz](https://stackblitz.com/edit/angular-ivy-acwkss?file=src/app/progress-full/progress-full.component.ts) the part app-progress-full is working as I expect, But this is not the implementation of the code from the company. So many files, I can not implement that part. — Pascal, Aug 07 '22 at 13:34
OK, the problem in the stackblitz is that `progress-full` emits 0-based values and you expect 1-based values in the `my-app` (hence `num - 1`). Is this the case with the real implementation? — skink, Aug 07 '22 at 13:39
(hence num - 1). Is this the case with the real implementation? Yes, because the first step has the value 1 not 0 and the array starts with the index 0. — Pascal, Aug 07 '22 at 17:00

score 0 · Accepted Answer · answered Aug 08 '22 at 13:34

OK, callbacks from this web-component are outside of angulars lifecycle. I need to trigger angulars change detection in my changeStepCallback on my own.

the change is: this.changeDetectorRef.detectChanges();

  changeStepCallback = (num: number) => {
    this.resetArray();
    this.steps[num - 1] = true;
    this.changeDetectorRef.detectChanges();
  }

Variable is not updating after callback

1 Answers1