Topic: ิHow to create button with spinner?
Expected behavior I have many buttons dinamically created when I fill data into html table. I want to show a spinner on the buttons when I click on it and change the button color with class 'btn-warning' then wait until my process finish then change the icon again and change the button color with class 'btn-success'.
Actual behavior I always got this error in console :- "ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." or "core.js:6014 ERROR TypeError: Cannot read property 'remove' of undefined". I also got error when I use innerHtml, innerText, setAttribute.
Resources (screenshots, code snippets etc.) onUpdatePosition(btn: HTMLButtonElement) { //btn is the button element with mtbBtn directive in it. //Without the directive the code works find but the style has gone. dosomthing(res => { //show spinner on the button and change text to loading; btn.innerHTML = ' Loading...'; //Change color of the button btn.classList.add('btn-warning');
//do some process here !
btn.classList.remove('btn-warning');
btn.classList.add('btn-success'); //Change color
//Change Icon
btn.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i> Success';
});
}
Dear @udommeng
Hmm, it seems like an angular / logic error. Try to get the desired effect in a different way.
Below an example:
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<button (click)="onClick()" type="button" mdbBtn [color]="yourColor" mdbWavesEffect>
<i *ngIf="status === 'start'" class="fa fa-circle" aria-hidden="true"></i>
<i *ngIf="status === 'loading'" class="fas fa-spinner"></i>
<i *ngIf="status === 'success'" class="fa fa-check" aria-hidden="true"></i> {{ text }}
</button>
</div>
</div>
</div>
TS
yourColor = 'blue';
text = 'Start';
status = 'start'
ngOnInit() {}
onClick() {
this.yourColor = 'warning';
this.text = 'Loading...';
this.status = 'loading'
setTimeout(() => {
this.yourColor = 'success';
this.text = `Success`;
this.status = 'success'
}, 2500);
}
Hope it helps!
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.5.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No