I have a p-carousel, inside are a batch of vocabulary cards and each one has a single choice question, the user has to choose the right translation answer for that word, then the carousel autoly switch to next card.
I am using four p-buttons to display question options, when the user click the right button for the answer, the button should go green, this logic is simple and has no problem. (I am now using severity=success to indicate a right answer is been selected, and severity=danger to indicate a wrong select, by default all buttons are severity=secondary). When user select a wrong button, the button has been clicked should go red indicating a wrong answer, meanwhile the right button should go green to reveal the right answer. The problem is, I found that I can only change the severity of the button that I clicked, but can not change other button's severity. For example, when I click btn1, I want btn2 to go green, and btn1 go red, now only btn1 successfully go red, but btn2 remains untouched.
In HTML, I simply pass all four buttons' ref to function as parameters, so I can manipulate them with some logic to set the colors or severity.
Here is HTML:
<p-carousel #carousel [value]="words2Learn" [numVisible]="1" [numScroll]="1" [showNavigators]="false"
[showIndicators]="false" itemStyle="width:100%" [page]="wordIdx"
(onPage)="onPageSwitch($event, carousel)">
<ng-template let-word pTemplate="item">
<p-fieldset legend={{word.wordDto.bookNameCh}}
class="card flex flex-column md:flex-row md:align-items-center justify-content-around">
<div
class="flex flex-column md:flex-row md:align-items-center justify-content-around max-lg:gap-0">
<span class="flex justify-content-center mb-2 lg:mr-3">
<p-button #transBtn1 label="{{word.options[0]}}" severity="secondary"
(click)="onChooseATrans(0,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
</span>
<span class="flex justify-content-center mb-2 lg:mr-3">
<p-button #transBtn2 label="{{word.options[1]}}" severity="secondary"
(click)="onChooseATrans(1,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
</span>
<span class="flex justify-content-center mb-2 lg:mr-3">
<p-button #transBtn3 label="{{word.options[2]}}" severity="secondary"
(click)="onChooseATrans(2,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
</span>
<span class="flex justify-content-center mb-2 lg:mr-3">
<p-button #transBtn4 label="{{word.options[3]}}" severity="secondary"
(click)="onChooseATrans(3,word, transBtn1, transBtn2, transBtn3, transBtn4)"></p-button>
</span>
</div>
</p-carousel>
.ts code:
onChooseATrans(chooseIdx: number, word: any, btn1: Button, btn2: Button, btn3: Button, btn4: Button) {
// always reveal right answer after a click, the switch works, severity set successfully, but button on page remains same.
switch (word.rightAnIdx) {
case 0:
btn1.severity = 'success';
console.log(btn1);
break;
case 1:
btn2.severity = 'success';
console.log(btn2);
break;
case 2:
btn3.severity = 'success';
console.log(btn3);
break;
case 3:
btn4.severity = 'success';
console.log(btn4);
break;
default:
break;
}
// if select is right logic
if (chooseIdx === word.rightAnIdx && !word.wordStatusOffset) {
this.words2Learn.filter(x => x.wordDto.id === word.wordDto.id).map(x => x.wordStatusOffset = -1);
this.showAllDetails();
}
// if select is wrong, set selected btn to danger severity
else if (chooseIdx !== word.rightAnIdx && !word.wordStatusOffset) {
this.words2Learn.filter(x => x.wordDto.id === word.wordDto.id).map(x => x.wordStatusOffset = 1);
this.showAllDetails();
switch (chooseIdx) {
case 0:
btn1.severity = 'danger';
break;
case 1:
btn2.severity = 'danger';
break;
case 2:
btn3.severity = 'danger';
break;
case 3:
btn4.severity = 'danger';
break;
default:
break;
}
}
In the .ts code, onChooseATrans() function handle the button click event. Here, no matter right or wrong, the right button is always turn green, so the first switch clause always hit, after that I should check if the click is right, for the wrong button clicked, I should turn the clicked button to red, but as I have mentioned, the clicked button won't change severity, it just remain the same.I have tried to console.log(btn1), to see if severity property has been changed correctly, and I saw it did, event thought the severity has been set to success, on the web page it still show secondary. But if I click a right button, it goes to green as expected. So the problem seems to be I can not manipulate other button in this way. Please HELP!
BTW: Primeng version 17.18; angular version: 17.
transBtn1 is some kind of element, which means it should probably work with:
transBtn1.setAttribute('severity', 'danger')
or
transBtn1.nativeElement.setAttribute('severity', 'danger')
It is however more common to bind the attribute to a scope variable.
[severity]="someVariable"
or bind it to an observable (behaviorSubject) (better for changeDetection)
[severity]="someVariableObservable$ | async"
I would probably use your word array to loop in the template (and add severity to the array):
@for (item of words; track item.severity) {
<button [severity]="item.severity" (click)="item.severity = 'danger'">{{ item.name }}</button>
}