I want to change the selected button to `primary` button. I am sending id to asp.net core and changi-CodePudding

<ng-container *ngIf="question.questionType == 4">
  <ng-container *ngFor="let answer of question.answers">
     <button 
         (click)="setanswer(answer.answerId)"   
         [value]="answer.isSelected" 
          
         name="{{ answer.answerId }}">{{ answer.answerDescription }}
     </button>
  </ng-container>
</ng-container>

CodePudding user response：

You have a bunch of alternatives, let's say you have this css class defined:

.primary {
  background-color: green;
}

<!-- 1) Property Binding -->
<button [class.primary]="answer.isSelected"></button>

<!-- 2) NgClass -->
<button [ngClass]="{ 'primary': answer.isSelected }"></button>

<!-- 3) ngStyle-->
<button [ngStyle]="{ 'background-color': answer.isSelected ? 'green' : 'blue' }"></button>

Sidenote, in your button HTML definition, you need to use property binding for name, not string interpolation, all html attributes can be used in Angular with property binding

 <button 
   (click)="setanswer(answer.answerId)"   
   [value]="answer.isSelected" 
    
   [name]="answer.answerId">{{ answer.answerDescription }}
</button>