How to change each and every button's behavior if my button are coming dynamically from api


#1

used index for every button which is clickable but unable to use the index in controller part of typescript to change the behavior

<ion-col class=“HeigherWidth border” style=“border: thin solid #797979” *ngFor=‘let subjects of groupname’>

{{subjects.groupnameM}}

            <ion-row *ngFor='let subject of exArray  let i=**index**' [ngClass]="{'active': i == selectedIdx-1}" (click) =" Toselect(i, subject.title, subjects.groupnameM)">

                <button  ion-button small>{{myButton}}</button>

            </ion-row>

Type script part

Toselect(index, a , b)
{
this.selectedIdx = null;

        this.selectedIdx = [];
        this.selectedIdx=index;
    
    for(var i=this.selectedIdx;i<=this.selectedIdx;i++) {

        if (b === 'Maths' && a === 'CBSE Class-02' && this.selectedIdx === i) {
            //this.createSession(a, this.selectedIdx, b)
            //    alert(this.selectedIdx)
            //this.repeat(this.selectedIdx)
            for(var j=this.selectedIdx;j<=this.selectedIdx;j++)
            this.myButton[i] = " Started -- Time Remaining";
            this.delay();

        }
        else {
            alert('Server Error ');
        }

    }
      }

#2

I’m not really sure because your ‘problem’ seams rather vague, because that ngFor isn’t valid syntax. Try:

*ngFor=‘let subject of exArray; let i=index

You’re missing a ;

If this is not your problem, maybe you can elaborate on the part unable to use the index in the controller. Do you get an error, or aren’t you receiving any index in your typescript class at all?


#4

I am not getting any error, in my controller part i have alerted Index and its coming so i am receiving the index … but the thing is that when i click to single button using a particular index, the changes is reflecting to all the button. This is my problem.


#5

Maybe you could put a small repo together and share it with us? It’s a bit sloppy to read it like this in a thread.


#6

i just want to use the index value to separate each button’s behavior … for just changing its name …as my button is appearing dynamically from API.

ex-
myButton : any //my button name is
selectedIdx: any // here i am saving my index value which is coming from html page
this.myButton= ‘create’; // initially mybutton name is Create ( for all the button)
Toselect(index) // its my click method name which is getting the parameter index from html part
{

this.selectedIdx = null;
this.selectedIdx = [];
this.selectedIdx=index; // transfer the value to selectedIdx

for(var i=this.selectedIdx;i<=this.selectedIdx;i++) // say my selectedIdx=2 … when i click the third button
{
if ( this.selectedIdx === i)
{
this.myButton = " Started – Time Remaining"; // change the name of my button which i have //clicked
this.delay(); // call delay method

        }
        else {
            alert('Server Error ');
        }

    }

}

delay()
{
setTimeout(() =>this.myButton=‘Finished’, 10000) // it will wait for 10000ms then again it will //change name
}

but after running the above code when clicked a button all button name changed to “Started – Time Remaining” and after 10000ms the name for all button changed to “Finished”.
My requirement is that if i click a single button its only name should be changed


#7

Could you please format your post? It’s kinda hard to read it like this.


#8

BTW it’s pretty easy to say why al your buttons behaviour change. Since you’re doing this:

this.myButton = " Started -- Time Remaining"; // change the name of my button which i have //clicked

All your buttons are called myButton, hence the change of every single button into the same string. You’re not doing anything with that index. Any reason for using var instead of let (just curious)?


#9

Ya that is the catch, but how can i name the button differently as i am not aware how many buttons will appear from API as its coming dynamically, that the main problem.

<ion-row *ngFor='let subject of exArray let i=index’ [ngClass]="{‘active’: i == selectedIdx-1}" (click) =" Toselect(i, subject.title, subjects.groupnameM)">

            <button  ion-button small>{{myButton}}</button>  // thats why using myButton  As the name

        </ion-row>

var and let is behaving same here thats why sometime i use var :slight_smile:


#10

var and let is behaving same here thats why sometime i use var :slight_smile:

That’s not true. In fact, there are some very distinct differences between those two. You can do some reading up over here: https://www.typescriptlang.org/docs/handbook/variable-declarations.html

Instead of binding to myButton, make the name of the button available through the object you’re repeating. So you’re doing *ngFor over subject, just alter the subject.button_text attribute. You can add that attribute while getting the data in from your API (that way you don’t need to put it into your data). Together with the index of the particular button, you could then change the subject.button_text at the given index.


#11

Ok thanks will do it according you have advice…, if it will work i will let you know :slight_smile:
Thanks


#12

I’m totally confused as to why you don’t just use a radio group here.


#13

As because i haven’t used that till now. But my problem can be resolved through it ?


#14

i cant change the API or cant add anything to API which i have :frowning:


#15

As because i haven’t used that till now. But my problem can be resolved through it?


#16

You’re missing my point. You shouldn’t add it to your API at all. When your data is pulled in your app (client side) you could add this extra attribute. No need to make adjustments to your API. But maybe you should explore the option of radio groups which @rapropos proposed first.


#17

can you explain me with an example as not getting any output :frowning: