moff / angular2-ladda

Angular 2 Ladda module
MIT License
97 stars 20 forks source link

How do I keep the button enabled? #25

Closed dolthead closed 5 years ago

dolthead commented 6 years ago

Awesome progress buttons!

I can't figure out how to keep the button enabled so I can use it as a toggle. Is there an attribute or config parameter I can use to keep the button enabled?

theodorejb commented 5 years ago

There isn't an attribute or config parameter for this, but it is possible to do with a little extra code.

The underlying Ladda library always disables the button when loading starts, but since angular2-ladda supports binding to the button's disabled property, you can immediately re-enable it after loading starts so that it will work as a toggle:

View

<button [disabled]="disabled" [ladda]="loading" (click)="toggle()">Toggle me</button>

Controller

public disabled: boolean = false;
public loading: boolean = false;

toggle() {
    if (this.loading) {
        this.loading = false;
    } else {
        this.disabled = true;
        this.loading = true;

        setTimeout(() => {
            this.disabled = false;
        }, 0);
    }
}