Angular Assigning ngIf class boolean properties when calling function to check for different data types

Question

I am trying to assign different angular class boolean properties to a ngIf but I checked the ngSwitch and ngIf else with templates I don't think those will work.

In my sample dataset I have something like this

   dataSet: [ { total: '$382734.99', clauseName: 'showTotalDollars' },
                    { total: '3.22%', clauseName: 'showPercentageData' }
              ]

where my class boolean properties is defined as

 showTotalDollars: boolean = true;
  showPercentageData: boolean = false;

In my angular code, I tried the following which does not work

<div class="ng-container" *ngFor="let dataset of sales.dataset">
  <div class="ng-container" *ngIf="{{dataset.clauseName}}">
     <mat-list-item><span>{{total}}</span></mat-list-item>
  </div>
</div>

ngIf does not work with interpolation. 

I also tried 

*ngIf="getClauseName(item)"

In my ts code

 getClause(clickedItem: string) {

   if (clickedItem.clauseName == 'showTotalDollars') {
     return 'showTotalDollars;
   }
   else if (clickedItem.clauseName == 'showPercentageData') {
     return 'showPercentageData;
   }
   ... and so on
 }

This also did not work.

It seems like in the ngIf works with *ngIf="showTotalDollars" and *ngIf="showPercentageData" in the html code and not getting assigned the name of the boolean properties in the ts code.

I need something that works like this when the angular code is looping thru each record in the dataset and checking for the clauseName (there are many, not just 2) and assign the class boolean property name. Something that works like this

if (clauseName == 'showTotalDollars') then
  *ngIf="showTotalDollars";
else if (clauseName == 'showPercentageData') then
  *ngIf="showPercentageData";

After playing around the interpolation and the getClauseName function, I am not sure how to achieve this.

The desired behavior would be the ngFor loops thru each record in dataset (there are many) and check on the clauseName which gives an indication of the data type. Find a way to dynamically set the ngIf to a specific boolean property name from the ts class.

Any help is appreciated. thanks.

Andrei Andrei · Accepted Answer · 2019-02-19T13:25:07

working code would be

<div class="ng-container" *ngFor="let dataset of sales.dataset">
  <div class="ng-container" *ngIf="this[dataset.clauseName]">
    <mat-list-item><span>{{total}}</span></mat-list-item>
  </div>
</div>

Angular Assigning ngIf class boolean properties when calling function to check for different data types

1 Answers