The structure of the return data from the API is not shown, so I have created a mock data to illustrate the shape.
To see what I did, you can check out this demo:
Within the app.component.ts file, there is mock data available:
// Mock backend data.
public resultViewModels: ResultViewModel[] = [
{
id: 1,
question: 'How are you?',
answer: 'I am great!',
isCorrect: true,
},
{
id: 2,
question: 'Where are you?',
answer: 'Somewhere',
isCorrect: false,
},
{
id: 3,
question: 'What day is today?',
answer: 'No sure',
isCorrect: false,
},
];
The returned shape of your API will differ, requiring adjustments. The id property indicates the answer number on the UI, while isCorrect is used for displaying Green vs. Red and toggling the icon visibility.
In the app.component.html
<div class="result-grid">
<div
*ngFor="let result of resultViewModels"
class="result"
[class.correct]="result.isCorrect"
[class.incorrect]="!result.isCorrect"
>
<span>{{ result.id }}</span>
<!-- Replace these with icon of your choice -->
<span *ngIf="result.isCorrect">Check</span>
<span *ngIf="!result.isCorrect">Cross</span>
</div>
</div>
We utilize two functionalities here:
[class.correct].*ngIf="result.correct"
The first one adds the class "correct" to the div if result.isCorrect is true.
The second one shows the "Check" icon when result.correct is true and hides it when result.correct is false.
Here is the app.component.css
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 50px));
gap: 16px;
}
.result {
border: 1px solid gray;
}
/*
used when [class.correct]="true"
*/
.result.correct {
background-color: green;
}
/*
used when [class.incorrect]="true"
*/
.result.incorrect {
background-color: red;
}