When I receive data from an API, I am showcasing specific items for female and male age groups on a webpage using the code snippet below:
<ng-container *ngFor="let event of day.availableEvents">
{{ event.name }}
<br>
<ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
<span [class.is-active]="status" (click)="updateStatus()" {{ maleAgeGroup }}</span>
</ng-container>
</ng-container>
This is the JSON dataset that I'm handling:
"days": [
{
"date": "2021-04-14T00:00:00.000Z",
"availableEvents": [
{
"id": 1,
"name": "Event A",
"femaleAgeGroups": ["U13", "U15", "U17"],
"maleAgeGroups": ["U13", "U15", "U17"]
},
{
"id": 2,
"name": "Event B",
"femaleAgeGroups": ["U13", "U15", "U17"],
"maleAgeGroups": ["U13", "U15", "U17"]
},
]
}
]
Whenever an age group is clicked, my goal is to toggle its status between true and false so that the is-active CSS class can be added or removed accordingly.
Despite trying multiple solutions from Stack Overflow, I haven't been able to make it work properly and often encounter errors like 'Cannot assign status to type string'. Perhaps the issue lies in the structure of my data?
The desired outcome is shown in the example below, where the highlighted text has been clicked and the is-active class is applied: