Compound If statement not evaluating to true Angular

Question

I have the following block of code:

<tbody>
    <tr *ngFor="let row of model">
        <ng-container *ngFor="let columnDataName of columnDataNames">
            <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
                <ng-template *ngIf="showRowTextBox && columnDataName === conditionalInputName || columnDataName === conditionCheckBoxName; else otherColumns">
                    <ng-container *ngIf="columnDataName === conditionalInputName">
                        <input type="text" placeholder="Enter text here" [hidden]="!chkEnabled?.checked" (focusout)="onTextBoxFocusOut(row[primaryKeyColumnName], $event)" />
                    </ng-container>
                    <ng-container *ngIf="columnDataName === conditionCheckBoxName">
                        <input type="checkbox" [checked]="chkAll?.checked" #chkEnabled ngModel />
                    </ng-container>
                </ng-template>
                <ng-template #otherColumns>
                    <ng-container *ngIf="modelConfig[columnDataName].isDate;">
                        {{ row[columnDataName] | date:'d MMM yyyy' }}
                    </ng-container>
                    <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
                        <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
                    </ng-container>
                    <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
                        {{ row[columnDataName] }}
                    </ng-container>
                </ng-template>
            </td>
        </ng-container>
        <td *ngFor="let buttonColumnName of buttonColumnNames">
            <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
        </td>
        <!-- <ng-container *ngIf="showRowTextBox">
            <td>
              <input type="text" placeholder="Enter text here" [hidden]="!chkEnabled.checked" (focusout)="onTextBoxFocusOut(row[primaryKeyColumnName], $event)"/>
            </td>
            <td>
              <input type="checkbox" [checked]="chkAll?.checked" #chkEnabled ngModel/>
            </td>
          </ng-container> -->
    </tr>
</tbody>

The page does not render as expected, because the if statement below does not evaluate to true.

<ng-template *ngIf="showRowTextBox && columnDataName === conditionalInputName || columnDataName === conditionCheckBoxName; else otherColumns">

The ShowRowTextBox is set to true, and at some point of the iteration, the columnDataName will either be equal to the conditionalInputName or condtionCheckBoxName.

Is my logic incorrect?

Refer this link: https://stackoverflow.com/questions/44837756/why-ngif-doesntwork-with-ng-template — , Sep 25 '18 at 10:30
@Neyxo I have tried formatting my statement as you suggested, but it still evaluates to false — monstertjie_za, Sep 25 '18 at 10:34
@Neyxo would that really make a difference? `true && false || true` is going to give the same output as `true && (false || true)`. Same if you swap the OR conditions. — VLAZ, Sep 25 '18 at 10:34
@vlaz Right, makes sense. I hadn't thought of the precedence. — Neyxo, Sep 25 '18 at 10:47
@Maheswaran the link you provided seemed to have solved my issue, will post my answer soon. — monstertjie_za, Sep 25 '18 at 10:49
Probably unrelated, but you can use the safe navigation operator instead of `modelConfig[columnDataName] && modelConfig[columnDataName].isVisible`, giving you `modelConfig[columnDataName]?.isVisible` — ShamPooSham, Sep 25 '18 at 10:57

score 0 · Accepted Answer · answered Sep 25 '18 at 10:51

With reference to this article, I changed my markup as follow:

<tbody>
    <tr *ngFor="let row of model">
      <ng-container *ngFor="let columnDataName of columnDataNames">
        <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
          <ng-container *ngIf="showRowTextBox && (columnDataName === conditionalInputName || columnDataName === conditionCheckBoxName); else otherColumns">
            <ng-container *ngIf="columnDataName === conditionalInputName">
              <input type="text" placeholder="Enter text here" [hidden]="!chkEnabled?.checked" (focusout)="onTextBoxFocusOut(row[primaryKeyColumnName], $event)"/>
            </ng-container>
            <ng-container *ngIf="columnDataName === conditionCheckBoxName">
              <input type="checkbox" #chkEnabled ngModel/>
            </ng-container>
          </ng-container>
          <ng-template #otherColumns>
            <ng-container *ngIf="modelConfig[columnDataName].isDate;">
              {{ row[columnDataName] | date:'d MMM yyyy' }}
            </ng-container>
            <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
              <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
            </ng-container>
            <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
              {{ row[columnDataName] }}
            </ng-container>
          </ng-template>
        </td>
      </ng-container>
      <td *ngFor="let buttonColumnName of buttonColumnNames">
        <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
      </td>
      <!-- <ng-container *ngIf="showRowTextBox">
        <td>
          <input type="text" placeholder="Enter text here" [hidden]="!chkEnabled.checked" (focusout)="onTextBoxFocusOut(row[primaryKeyColumnName], $event)"/>
        </td>
        <td>
          <input type="checkbox" [checked]="chkAll?.checked" #chkEnabled ngModel/>
        </td>
      </ng-container> -->
    </tr>
  </tbody>

Yes it is, replacing the first to be an seemed to have solved the problem — monstertjie_za, Sep 25 '18 at 10:57

Compound If statement not evaluating to true Angular

1 Answers1