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

Storing data from a collection of interface objects in a string array

The Angular 2 routerLink doesn't update the component after the initial click, even though the URL changes in the browser

Angular2 URL fragment not recognized in Firefox

Save the application's state of the user in a mean stack program

What could be causing the import alias issue in the latest version of Next.js, version 12

Best practice for incorporating the cq-prolyfill third-party JavaScript library into an Angular 5 application

Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

Aggregating all elements in an array to generate a Paypal order

What is the best way to incorporate an exported TypeScript class into my JavaScript file?

How can I gather information from members who have already signed up?

How to bring in a module from another package in Angular 4

Encountering an "Invalid parameter: redirect_uri" error in Keycloak while manually refreshing the page

Discovering the interface type of class properties in order to implement a factory method

The absence of the 'profileStore' property is noticed in the '{}' type, which is necessary in the 'Readonly<AppProps>' type according to TypeScript error code ts(2741)

Tribal Code Typescript Compiler

Modifying the value of an observable in a component does not automatically activate the subscribe function in a service

Looking for a way to validate all form fields even when only one field is being used?

Do I have to wait for the HTTP get request to access the fetched object property?

What is the best approach for implementing line coverage for object literal in Typescript Mocha unit-tests?