ิ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';                    
});

}