CODEWITHSUNDEEP
jqueryangular
Justin C.
Justin C.

Reputation: 109

Angular click event to add class to specifically clicked element, while removing it from ones that aren't clicked

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
})

Upvotes: 0

Views: 1205

Answers (1)

Benzara Tahar
Benzara Tahar

Reputation: 2217

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;
}

Upvotes: 3

Related Questions