I am facing a challenge in assigning different angular class boolean properties to an ngIf, as I have tried using ngSwitch and ngIf else with templates but they do not seem to work effectively.
In the sample dataset provided, it looks something like this:
dataSet: [ { total: '$382734.99', clauseName: 'showTotalDollars' },
{ total: '3.22%', clauseName: 'showPercentageData' }
]
The class boolean properties are defined as follows:
showTotalDollars: boolean = true;
showPercentageData: boolean = false;
In my angular code, I attempted the following approach which did not yield the desired results:
<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>
It's worth noting that ngIf does not work with interpolation.
I also experimented with:
*ngIf="getClauseName(item)"
In my typescript code
getClause(clickedItem: string) {
if (clickedItem.clauseName == 'showTotalDollars') {
return 'showTotalDollars';
}
else if (clickedItem.clauseName == 'showPercentageData') {
return 'showPercentageData';
}
... and so on
}
This approach also proved unsuccessful.
It appears that ngIf works with *ngIf="showTotalDollars" and *ngIf="showPercentageData" in the HTML code instead of directly assigning the name of the boolean properties from the typescript code.
I am looking for a solution where the angular code loops through each record in the dataset, checks the clauseName (of which there are many, not just 2), and dynamically assigns the corresponding class boolean property name. Something along these lines:
if (clauseName == 'showTotalDollars')
then *ngIf="showTotalDollars";
else if (clauseName == 'showPercentageData')
then *ngIf="showPercentageData";
After experimenting with interpolation and the getClauseName function, I am uncertain about how to achieve this.
The desired outcome is for the ngFor loop to iterate through each record in the dataset, check the clauseName indicating the data type, and dynamically set the ngIf to a specific boolean property name from the TypeScript class.
Any assistance or guidance on this matter would be greatly appreciated. Thank you.