update:
Although it may seem a bit hardcoded, this serves as a solid foundation:
.ts:
status: boolean = false;
option=""
option1=[false, false, false]
option2=[false, false, false]
option3=[false, false, false]
constructor(private renderer: Renderer2){}
data = [{
id:"1a",
One:"Yes-1a",
Two:"Maybe-1b",
Three:"No-1c"
},{
id:"2a",
One:"Yes-2a",
Two:"Maybe-2b",
Three:"No-2c"
},
{
id:"3a",
One:"Yes-3a",
Two:"Maybe-3b",
Three:"No-3c"
}
]
clickEvent1(i){
this.option = 'option1 : ' + this.option1
if(this.option1[i] == true){
this.option1[i] = false
}else{
this.option1[i] = true
}
this.option2[i] = false; this.option3[i] = false
}
clickEvent2(i){
this.option = 'option2 : ' + this.option2
if(this.option2[i] == true){
this.option2[i] = false
} else{
this.option2[i] =true
}
this.option1[i] = false; this.option3[i] = false
}
clickEvent3(i){
this.option = 'option3 : ' + this.option3
if(this.option3[i] == true){
this.option3[i] = false
}else{
this.option3[i] = true
}
this.option1[i] = false; this.option2[i] = false}
}
.html:
<div class="card" style="height:400px">
<div class="card-body no-gutters">
<div *ngFor="let radio of data" class="btn-group-toggle" data-toggle="buttons">
<div class="row">
<label class="btn btn-secondary col-4"
[ngClass]="option1 ? 'bbb' : ''">
<input (click)="clickEvent1()"
type="radio" name="options" id="option1">
{{radio.One}}
</label>
<label class="btn btn-secondary col-4"
[ngClass]="option2 ? 'bbb' : ''">
<input (click)="clickEvent2()"
type="radio" name="options" id="option2" autocomplete="off"> {{radio.Two}}
</label>
<label class="btn btn-secondary col-4"
[ngClass]="option3 ? 'bbb' : ''">
<input (click)="clickEvent3()"
type="radio" name="options" id="option3" autocomplete="off"> {{radio.Three}}
</label>
{{option}}
</div>
</div>
</div>
</div>
//Apologies for my lack of knowledge on saving changes on stackblitz :(