When working with my mat-option, I have two different sets of values to choose from:
tempTime: TempOptions[] = [
{ value: 100, viewValue: '100 points' },
{ value: 200, viewValue: '200 points' }
];
tempTimesHighNumber: TempOptions[] = [
{ value: 1000, viewValue: '1000 points' },
{ value: 2000, viewValue: '2000 points' }
];
In order to create a conditional statement in my HTML based on two specific variables:
public SentDate;
public CurrentDate;
I'm extracting these variables from a datepicker. The goal is to display the tempTime values in the mat-options if the dates are equal, and show the temptimesHighNumber values if they are not.
This is what I attempted:
<mat-form-field>
<mat-label>Tally up that score!</mat-label>
<mat-select
[(value)]="selectedTempTime"
>
<ng-container>
<mat-option
*ngIf="checkConditionSentDate === checkConditionCurrentDate"
[value]="option.value"
*ngFor="let option of tempTimes"
>{{ option.viewValue }}</mat-option
>
<mat-option
[value]="option.value"
*ngFor="let option of tempTimesIfNotTodaysDate"
>{{ option.viewValue }}</mat-option
>
</ng-container>
</mat-select>
</mat-form-field>
The error message received is:
Can't have multiple template bindings on one element. Use only one attribute prefixed with * ("heckConditionSentDate === checkConditionCurrentDate"*ngIf, or am I approaching this incorrectly?