Issue using Angular, Local Storage and NgIf

Question

I'm currently building an application that is making use of information stored in local storage as the user works their way through the application.

When they get to one particular question, they'll be shown different text and options depending on the choice they select. If they select "one" applicant, then on a following step they will be shown a single input field. If they select "two" applicants they'll be shown two input fields.

I've been able to get this to a certain extent, it's just that it doesn't work exactly how I expect it to. It will only use the value in local storage after the application is reloaded, not during the current session.

Here's a rough example. If I've never used the application before and there is nothing in my local storage and I select "two" applicants:

Screenshot One

On the subsequent step, it only shows me one field (this is default, but there should be two because that's what I selected) and it hasn't populated the text text:

Screenshot Two

Now, if I reload the application and go back to the same question and select "one" this time:

Screenshot Three

This time around, it will show the text associated with two users and the two input fields, even though I selected "one":

Screenshot Four

So it appears to have a "delay" (for want of a better word) where it will only show the choice made on the last session.

I've tried a few variants of how to tackle this, but they all seem to give me the same result, and I've already looked around Stackoverflow and Google to see if anyone has a similar problem but I haven't be able to find anything that helps me.

Here's the relevant code from my component.html:

        <mat-step label="Step 2" [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">

                <div ng-controller="step2">

                <h2>How many people are applying?</h2>

                <mat-button-toggle-group>
                    <div *ngFor="let step2option of step2options">
                      <mat-button-toggle (click)="getStep2Val(Oname);" class="btn btn-primary step-button" id="{{step2option.id}}" [ngClass]="status ? 'selected' : ''"><span #Oname>{{step2option.text}}</span></mat-button-toggle>
                    </div>
                </mat-button-toggle-group>

                <div>You chose <strong>{{ selectedStep2option }}!</strong></div>

                <button mat-stroked-button (click)="goToNext()" class="btn btn-secondary continue-btn" [disabled]="selectedStep2option === 'none'">Continue</button>

              </div>

              </form>
        </mat-step>

        <mat-step label="Step 3" [stepControl]="thirdFormGroup">
            <form [formGroup]="thirdFormGroup">
                <div ng-controller="step3">
                    <h2>What <span *ngIf="users === 'One'">{{text1app}}</span> <span *ngIf="users === 'Two'">{{text2app}}</span>?</h2>

                    <div class="input-group" *ngIf="users == 'One' || 'Two'" >
                      <p>Applicant 1</p>
                      <span class="input-group-addon">£</span>
                      <input type="number" (change)="getStep3Val()" (keyup)="getStep3Val()" [(ngModel)]="app1income" [ngModelOptions]="{standalone: true}" id="step3appVal" min="0" step="500" data-number-to-fixed="2" data-number-stepfactor="500" />
                      {{app1income}}
                    </div>

                    <div class="input-group" *ngIf="users == 'Two'">
                      <p>Applicant 2</p>
                      <span class="input-group-addon">£</span>
                      <input type="number" (change)="getStep4Val()" (keyup)="getStep4Val()" [(ngModel)]="app2income" [ngModelOptions]="{standalone: true}" id="step4appVal" min="0" step="500" data-number-to-fixed="2" data-number-stepfactor="500" />
                      {{app2income}}
                    </div>

                    <button mat-stroked-button (click)="goToNext()" class="btn btn-secondary continue-btn" [disabled]="app1income === 0">Continue</button>

                  </div>
            </form>
        </mat-step>

And from my component.ts:

  users: string;

  getUsers() {
    this.users = this.readLocalStorageValue('Number of applicants');
  }

  readLocalStorageValue(key: string): string {
    return localStorage.getItem(key);
  }

  selectedStep2option: string = 'none';

  step2options = [
    {
      text: 'One',
      id: 'step2one'
    },
    {
      text: 'Two',
      id: 'step2two'
    }
  ];

  getStep2Val (Oname: any) {
    this.selectedStep2option = Oname.textContent;
    localStorage.setItem('Number of applicants',  Oname.textContent);
  }

  text1app: string = 'is your income';
  text2app: string = 'are your incomes';

At the moment I can't seem to figure out why there is this delay in the choice the user makes. Does anyone have any idea as to why this might be doing this? Or is this a completely long-winded way to go about it and I'm missing an much easier way of having this conditional logic. I'm pretty new to Angular so I could be going down the completely wrong track here.

Any help would be greatly appreciated.

Answer 1

Never mind. I figured it out. It was a simple case of having my getUsers() function call in the wrong place.

It should've been here:

                <button mat-stroked-button (click)="goToNext(); getUsers()" class="btn btn-secondary continue-btn" [disabled]="selectedStep2option === 'none'">Continue</button>

Instead it was on an earlier step.

Typical case of once you ask someone for help, the solution jumps in your face.