How to change button text and disable button on click event in angular2

Question

How do you change the text of a <button> when that button is clicked in angular2?

For example, changing the button text from "Save" to "Saving..." and then also set it to be disabled.

I know how to do this in AngularJS, jQuery, and plain JS, and I have some ideas on how to do this in Angular2, but I wanted to make sure I'm not doing it in some outdated or convoluted way when it comes to Angular2.

mkimmet · Accepted Answer · 2017-01-05 16:37:36Z

21

<button (click)="setSaving($event.target, 'saving')">save</button>

and then in your component:

setSaving(element, text){
  element.textContent = text;
  element.disabled = true;
}

You can also set the properties using the Renderer

edited Jan 5, 2017 at 16:37

mkimmet

7793 gold badges16 silver badges27 bronze badges

answered Jan 5, 2017 at 16:03

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mkimmet Over a year ago

thanks, cleaner than my ideas. One thing, you had element.attributes.disabled = true, which didn't seem to work for me, however, element.disabled = true did work. I've edited your post to reflect that.

angelcool.net · Accepted Answer · 2017-10-11 18:17:52Z

Here's an example for asynchronous calls that worked for me:

Template:

<button (click)="loadMore($event.target)">load more</button>

Component (pseudocode):

export class MyComponent{

    button;

    constructor(private _apiService: ApiService){}

    ngOnInit()
    {
        this.load();
    }

    load()
    {
        this._apiService
            .getAsyncFrom( '/sample/url' )
            .subscribe(data=> {

                // do something with your data

                // enable it
                if(this.button)
                {
                    this.button.textContent = 'load more';
                    this.button.disabled=false;
                }
            });
    }

    loadMore(element)
    {    
        // assign to class
        this.button = element;

        //disable it
        this.button.textContent = 'loading...';
        this.button.disabled=true;

        this.load();
    }
}

Basically assign the element to the class and access it where you need it.

Collectives™ on Stack Overflow

How to change button text and disable button on click event in angular2

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related