How to add a loading spinner to an Angular Material button

Step-by-step Guide

Angular Material button with loading spinner

Important Update (April 2022)

Due to the popularity of this article I decided to create the ngx-loading-buttons library. Please check it out and give it a ⭐️ if you find it useful.

GitHub - dkreider/ngx-loading-buttons: 💥 Add a loading spinner to your Angular Material buttons…

Err…

…wouldn’t it be nice if Angular Material had a button with a loading spinner? Like the loading buttons that Semantic UI has.

Instead of ranting I decided to try to code this — and succeeded!

With no further ado, I’ve included the code below.

Our spinner (CSS).

Our button (HTML).

Our .ts file (the logic)

Done!

I told you this was simple. You’re welcome. Hope you enjoyed it!

If you found this article useful please smash that 👏 👏 👏 button! 💥

Follow Me: GitHub, Medium, Personal Blog

Newest Courses:

Create Stunning Themes With Angular Material

Angular Project Stucture (Best Practices) Training

Angular Project Setup Training

Angular Testing Masterclass