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