Clash Royale CLAN TAG#URR8PPP

Change specific button text on click inside ngFor

I have a list of 10 buttons using ngFor. I want to change the name of the button to enable and disable. At first I have Disable and when I click the button, the specific button with the id should change the text into Enable but every 10 buttons gets changed.

Disable

id

Enable

html

html

<div *ngFor="let task of tasks">
<button (click)="enableDisableRule(task.id)">toggleButton</button>
</div>


component

component

toggle = true;
toggleButton = 'Disable';

tasks = [
"id": 1, "name":"john",
"id": 2, "name":"tom",
.............
.......
"id":10, "name":"harry"
]

enableDisableRule(id)
this.toggle = !this.toggle;
this.toggleButton = this.toggle ? 'Disable' : 'Enable';



Can someone let me know how can I do it so that only the specific button text is changed.

Any help is appreciated. Thank you

is in yoyr case if you change one button the other become disable , only one task can be active ??
– Muhammed Albarmawi
2 days ago

@Muhammed I want to enable and disable any buttons and one button should not affect another.
– surazzarus
2 days ago

I have update my answer ,hope it work for you
– Muhammed Albarmawi
2 days ago

5 Answers
5

You need to add two more properties to each Button object, you cannot do with the same variable.

tasks = [
"id": 1, "name":"john","toggle":false,"status":'Disable',
"id": 2, "name":"tom","toggle":false,"status":'Disable',
"id":10, "name":"harry","toggle":false,"status":'Disable'
];


and then,

enableDisableRule(button)
button.toggle = !button.toggle;
button.status = button.toggle ? 'Disable' : 'Enable';



STACKBLITZ DEMO

STACKBLITZ DEMO

Thank you for the working demo. But I have to try to work without adding extra properties, since I get task from the an api and I cannot edit the api.. Isn't there any way without adding extra properties.. :)
– surazzarus
2 days ago

Even if it's API data you could loop through them and add the properties and create a custom array
– Sajeetharan
2 days ago

Sajeetharan has given a simple and working solution. You can have your own model in UI and ofcourse you can edit that and send whatever model you can send to server. This solution he has given is ideal one.
– Deepender Sharma
2 days ago

Isn't there any way without adding extra properties? task=task.map(x=>...x,status:"Disabled")
– Eliseo
2 days ago

@Eliseo no since you need to handle the state of individual button
– Sajeetharan
2 days ago

HTML:

<ng-container *ngFor="let task of tasks">
<button id="btn-task.id" (click)="toggleMe(task.id)"> text </button>
</ng-container>


TS:

text = 'Enable';
tasks = [
"id": 1, "name":"john",
"id": 2, "name":"tom",
"id":10, "name":"harry"
]
private toggleMe(id: number): void
document.getElementById("btn-"+id).innerHTML = document.getElementById("btn-
"+id).innerHTML == "Disable" ? "Enable" : "Disable";



Working Demo

You can set the id of the active element and use that as the basis of the text change

<div *ngFor="let task of tasks">
<button (click)="enableDisableRule(task.id)">getButtonText(task.id)</button>
</div>
component

toggle = true;
activeButtonId = null;

tasks = [
"id": 1, "name":"john",
"id": 2, "name":"tom",
.............
.......
"id":10, "name":"harry"
]

enableDisableRule(id)
this.toggle = !this.toggle;
this.activeButtonId = id;


getButtonText(id)
let buttonText;
id === this.activebuttonId ? buttonText= "Enable" : buttonText = "Disable";
return buttonText;



I like the approach you are trying to show but it doesn't work. First, one button is always enabled and Second, the enable button change to disable after another button is clicked.
– surazzarus
2 days ago

hey - i added the first on as default - to demonstrate the concepts. Will change answer. To have multiple buttons - you either need to add a property to the data as suggested by the other answer, or to have an array of activeButtonIds and if the button id is in there - show the update the text accordingly. You would then need a way of removing the ids from the array on sdeselection.
– gavgrif
2 days ago

I will use selectedButton to store the state of selected buttons,this way the state of the buttons is not saved in model (tasks)

selectedButton

component

selectedButton =

tasks = [
"id": 1, "name": "john" ,
"id": 2, "name": "tom" ,
"id": 10, "name": "harry"
];

enableDisableRule(id)
this.selectedButton[id]= !this.selectedButton[id];



template

<div *ngFor="let task of tasks">
<button (click)="enableDisableRule(task.id)">
selectedButton[task.id] ? 'Enabled' : 'Disabled'
</button>
</div>


stackblitz example

Create a function to add another properties to tasks object dynamically

addProperties()
for(task in this.tasks)
task[toogle]=true;
task[toogleButton]="Disable";




And call this method to add the two properties for each task in tasks object then change enableDisableRule(id) to this

enableDisableRule(id) {
for (task in this.tasks){
if(task[id]==id)
task.toggle=!task[toogle];
task.toogleButton=task.toogle ? "Disable" : "Enable";



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.