How would I convert something like this from jQuery to Angular?
HTML
<div>
<p class="question">Which would you like to select?</p>
<div class="answer">Answer 1</div>
<div class="answer">Answer 2</div>
<div class="answer">Answer 3</div>
</div>
jQuery
$(".answer").click(function(){
$(".selectedAnswer").removeClass('selectedAnswer') //removes this from any previously selected answer
$(this).addClass("selectedAnswer") //adds class to the new specific answer selected
})
A more flexible and dynamic solution is something like this:
some.component.html
<div>
<p class="question">Which would you like to select?</p>
<div *ngFor="let answer of answers"
(click)="select(answer)" class="answer"
[class.selectedAnswer]="selectedAnswer==answer">{{answer}}</div>
</div>
some.component.ts
// you can get your answer from some service
answers: string[] = ['Answer1', 'Answer2', 'Answer3'];
selectedAnswer: string = null;
/*select an answer*/
select(answer: string) {
this.selectedAnswer = answer;
}
