Ways to dynamically update button properties in Angular 2

Question

Ways to dynamically update button properties in Angular 2

Customized Template,

<div *ngFor="let item of items"  class = "col-sm-12 nopadding">
  <a  class="button buttonaquacss button-mini button-aqua  
      text-right pull-right" [ngClass]="{activec: isActive}" 
      (click)='updateStatus(item)' 
      #btnElement [ngStyle]="{'background-color':  backgroundColor}">{{buttonLabel}}
  </a>   
</div>

My custom TypeScript code,

buttonLabel = 'connect';
updateStatus(button): void {
    this.http.post('http://localhost:3000/updatestatus', formdata, { headers: headers })
        .subscribe(
        response => {
            if (response.json().status == 'success') {

                this.isActive = true;
                this.backgroundColor = 'blue';
            }

        });
}

The issue occurs when clicking one button affects all buttons, seeking suggestions to resolve the problem.

angular typescript

Answer 1

Answer №1

To avoid conflicts with the buttonname variable, it is important to bind each button to a unique variable. This can be achieved by either using different variable names for each button or utilizing an array of values.

<a (click)='send(button,detail._id)' #button>{{buttonname[detail._id]}}</a>

buttonname = {'id1': 'connect', 'id2': 'connect'};

sendrequest(button, index): void {
  this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
    .subscribe(
    response => {
        if (response.json().status == 'success') {
            buttonname[index] = 'pending';
            this.color = true;
        }
    });
}

update

<a (click)='send(button,detail._id)' #button>{{pendingId == detail._id ? 'pending' : 'success'}}</a>

pendingId;

sendrequest(button, index): void {
  this.pendingId = index;
  this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
    .subscribe(
    response => {
        if (response.json().status == 'success') {
            pendingId = null;
            this.color = true;
        }
    });
}

Answer 2

To avoid conflicts with the buttonname variable, it is important to bind each button to a unique variable. This can be achieved by either using different variable names for each button or utilizing an array of values.

<a (click)='send(button,detail._id)' #button>{{buttonname[detail._id]}}</a>

buttonname = {'id1': 'connect', 'id2': 'connect'};

sendrequest(button, index): void {
  this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
    .subscribe(
    response => {
        if (response.json().status == 'success') {
            buttonname[index] = 'pending';
            this.color = true;
        }
    });
}

update

<a (click)='send(button,detail._id)' #button>{{pendingId == detail._id ? 'pending' : 'success'}}</a>

pendingId;

sendrequest(button, index): void {
  this.pendingId = index;
  this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
    .subscribe(
    response => {
        if (response.json().status == 'success') {
            pendingId = null;
            this.color = true;
        }
    });
}

Ways to dynamically update button properties in Angular 2

Answer №1

Similar questions

gulp-angular2 task is malfunctioning

What is the best way for a function to accommodate various types that adhere to an interface?

In Angular 2, you can include a routerLink in a child component that directs to the root

Utilizing PrimeNG's p-dataView feature without repetitive FieldSets

The DHTMLX Gantt tool is throwing an error message saying "TS6137: Type declaration files cannot be

Should loaders be utilized in an Angular application?

Begin the NextJS project by redirecting the user to the Auth0 page without delay

Encountering the issue: "Error: The mat-form-field must include a MatFormField

Updating parent components through child components in ReactWould you like another unique

Is there a way to ensure that in React (Typescript), if a component receives one prop, it must also receive another prop?

Unable to determine the data type of the property within the table object

Angular 13: Problems arise with custom theme in Angular Material version 13

What is the best way to change the name of an imported variable currently named `await` to avoid conflicting with other variables?

Checking to see if a string meets the criteria of being a valid ARGB value

"Sequencing http.get requests in Angular 2 using

Protractor Jasmine experiencing issues with describe block within the it block

Creating a custom directive in Angular that dynamically applies attributes based on the current route

Angular 7/8 now allows for empty strings in Template Driven Forms

Issue with React filter function where data is not being displayed when search query is left

Is there a way to obtain a unique response in TestCafe RequestMock?