CEO @interfacewerk
Dipl.-Ing. Moritz C. Türck
~ Jeremy Keith
"A fresh and contemporary design delivers an enhanced user experience."
doing smth & progress
success or failure
neutral
<stateful-button [buttonState]="myButtonState">
<button (click)="do()">
<sb-label-idle>Save</sb-label-idle>
<sb-label-doing>Saving</sb-label-doing>
<sb-label-success>Saved</sb-label-success>
<sb-label-failure>Save failed!</sb-label-failure>
</button>
</stateful-button>
Angular2 Stateful Button
https://github.com/interfacewerk/ng2-stateful-button
import { ButtonState } from 'ng2-stateful-button';
@Component(…)
export class MyComponent {
…
myButtonState: ButtonState = ButtonState.IDLE;
…
do() {
this.myButtonState = ButtonState.DOING;
// http requests, timeout, etc.
this.myButtonState = ButtonState.SUCCESS;
}
}
Angular2 Stateful Button
https://github.com/interfacewerk/ng2-stateful-button
<div id="loading-app-placeholder">
<aside>
</aside>
<main class="loading">
</main>
</div>
<app-root></app-root>