Angular Material v22 adds a small but surprisingly useful improvement to buttons: built-in progress indicator support. Instead of manually swapping button text with a spinner and dealing with layout jumpiness, we can let the Material button directive manage the loading UI for us. In this post, I'll show you the old manual approach, why it creates a small UX issue, and how Angular Material v22 cleans it up.
A Simple Example
Let's start with a simple reports page:
We have a list of reports, and each report has a "Download" button using the matButton directive:
<section>
<ul class="report-list">
@for (report of reports(); track report.id) {
<li class="report-row">
<div class="report-info">
<span class="report-name">{% raw %}{{ report.name }}{% endraw %}</span>
<span class="report-meta">{% raw %}{{ report.date }} · {{ report.size }}{% endraw %}</span>
</div>
<button
matButton="outlined"
[disabled]="downloadingId() !== null"
(click)="download(report)">
Download
</button>
</li>
}
</ul>
</section>
Nothing unusual here.
But the loading UI is where this usually gets a little clunky.
The Old Way: Swap the Label for a Spinner
Before this new Angular Material v22 feature, a common approach was to conditionally replace the button label with a spinner.
First, we need to import the progress spinner in our component:
import { MatProgressSpinner } from '@angular/material/progress-spinner';
@Component({
selector: 'app-report-list',
templateUrl: './report-list.component.html',
styleUrl: './report-list.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatButton, MatProgressSpinner],
})
export class ReportListComponent {
// ...
}
Then we can update the button template to include the progress spinner conditionally when the report is downloading and the label when it isn't:
<button
matButton="outlined"
[disabled]="downloadingId() !== null"
(click)="download(report)">
@if (downloadingId() === report.id) {
<mat-progress-spinner
mode="indeterminate"
[diameter]="20"
aria-label="Downloading"
/>
} @else {
Download
}
</button>
Since this download doesn't expose a real percentage, mode="indeterminate" is the right fit here.
The diameter keeps the spinner small enough to fit inside the button, and the aria-label gives assistive technologies meaningful loading-state text since the visible label is being replaced.
And this works fine:
When the report is downloading, we show a spinner.
When it isn't, we show the label.
But there's still a UX issue.
The button shrinks when the label disappears and only the spinner remains.
That's because we're swapping the button's content entirely.
The text has one width, the spinner has another, and the button resizes to fit whatever is currently rendered.
It's not broken, but it feels a little janky.
And we had to write the conditional content logic ourselves.
If you're serious about leveling up your Angular skills, there's now an official certification path worth exploring.
Built with input from Google Developer Experts, it focuses on real-world Angular knowledge.
👉 Details here: https://bit.ly/4tfqleD
The Angular Material v22 Way: Use showProgress and progressIndicator
Angular Material v22 gives us another option.
Instead of swapping the label and spinner manually, both can live inside the button at the same time:
<button
matButton="outlined"
[showProgress]="downloadingId() === report.id"
[disabled]="downloadingId() !== null"
(click)="download(report)">
<mat-progress-spinner
progressIndicator
mode="indeterminate"
[diameter]="20"
aria-label="Downloading"
/>
Download
</button>
There are two important pieces here.
First, the button gets the showProgress input, which is new in Angular Material v22:
[showProgress]="downloadingId() === report.id"
This tells the matButton directive when the progress UI should be shown.
In this case, we only want progress on the button for the report currently being downloaded.
Then, the spinner gets the progressIndicator attribute:
<mat-progress-spinner progressIndicator />
This marks the spinner as the button's projected progress indicator.
So instead of us writing an @if block to decide what appears, Angular Material controls that progress indicator slot for us.
Why This Feels Better
The important detail is that the normal button content stays in the layout, even when the progress indicator is visible.
So the button still knows how wide the "Download" label is, even while the spinner is being displayed.
That means we avoid the width jump caused by replacing the content completely.
The end result is a loading button that feels stable instead of jumpy.
This Does Not Have to Be a Material Spinner
One nice part of this API is that progressIndicator is a projection slot.
That means the projected content doesn't have to be mat-progress-spinner specifically.
You could use a custom loading element if that fits your design system better.
The main thing is to make sure the progress indicator still communicates meaningful loading-state information, especially when the visible button label is hidden or visually replaced.
Cleaner Loading Buttons in Angular Material
This is one of those Angular Material updates that isn't huge, but it's immediately useful.
The old approach works, but it usually means manually swapping content and accepting small layout issues.
With showProgress and progressIndicator, Angular Material gives us a built-in pattern for loading buttons that feels more polished with less template logic.
Want to Go Deeper With Modern Angular?
Angular's newest APIs are changing the way we build.
If you're ready to go deeper with one of the biggest shifts in modern Angular, my Signal Forms course will help you get comfortable with the new forms model.
You can access it either directly or through YouTube membership, whichever works best for you:
👉 Buy the course
👉 Get it with YouTube membership
Top comments (0)