ngIf not triggering on update of [(ngModel)] variable

Question

I have a select with options. The select has an [(ngModel)] directive saving the selected values into "rightFieldTypeId." I then have elements I would like to display based on the value of "rightFieldTypeId." The string interpolation of rightFieldTypeId {{ rightFieldTypeId }} displays the correct value as I select different options (i.e. 1, 2 or 3). However, my elements based on the *ngIf directives never seem to evaluate/change.

<div class="d-flex w-50">
    <select class="form-control w-25 mr-4" [(ngModel)]="rightFieldTypeId">
        <option *ngFor="let option of fieldTypeOptions" [value]="option.id">
            {{ option.name }}
        </option>
    </select>
    {{ rightFieldTypeId }}
    <span *ngIf="rightFieldTypeId === 2">This is Text</span>
    <edit-spec-wizard-operations-builder *ngIf="rightFieldTypeId === 3"></edit-spec-wizard-operations-builder>
</div>

Any insight on how to achieve displaying different elements using the *ngIf directive based on the current value coming out of the [(ngModel)]

Answer 1

HTML option value is a string and comparing with strict comparison (===) will not not coerce types, so 2 === '2' will be false.

So couple ways to go with it:

1. Use double equal comparison - ==;
2. Use + to make an integer from a string *ngIf="+rightFieldTypeId === 2", but with this you could get a runtime error if rightFieldTypeId can't be coerced to an integer;
3. Simply compare to a string, because rightFieldTypeId will always be a string *ngIf="rightFieldTypeId === '2'"