I'm working on a question.component.html template where I render different options for a specific question. The goal is to change the background color of an option to yellow if the user selects the correct answer, and to red if they choose incorrectly.
Here is the code snippet:
question.component.html
`<div class="options">
<ol *ngFor="let option of optionsList; let i = index">
<li (click)="optionChose(i)">
<div appChangeBg
[isCorrect] = "isCorrectOptionChosen"
class="card">
{{ option }}
</div>
</li>
</ol>
</div>`
question.component.ts
`export class QuestionComponent implements OnInit {
isCorrectOptionChosen: boolean;
optionChose(index: number) {
if (index === this.correctOptionIndex) {
this.isCorrectOptionChosen = true;
} else {
this.isCorrectOptionChosen = false;
}
}
}`
change-bg.directive.ts
`@Directive({
selector: '[appChangeBg]'
})
export class ChangeBgDirective {
@Input() isCorrect: boolean = false;
constructor(private elRef: ElementRef, private renderer: Renderer2) {}
@HostListener('click') answer() {
if (this.isCorrect === true) {
this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'yellow');
}else{
this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'red');
}
}
}
However, I am facing an issue where the isCorrect variable in the directive is undefined initially. This results in the incorrect color being displayed even when the correct option is chosen. I need help troubleshooting this problem and finding a solution for it.