Better Loading Buttons in Angular Material v22 Angular Material v22 adds a small but surprisingly useful improvement to buttons: built-in progress indicator support. Instead of manually swapping …

ITNEXT is a platform for IT professionals, developers, and technology enthusiasts, offering articles, tutorials, and insights on a wide range of topics, including software development, cloud computing, and machine learning. With a focus on practical solutions and real-world applications, ITNEXT provides actionable advice and best practices for navigating the complexities of modern technology landscapes. Developers can learn about  technologies, explore hands-on tutorials, and stay up-to-date on the latest industry trends through ITNEXT's engaging and informative content.

ITNEXT

Angular Material v22 introduces built-in loading button support via two new APIs: the `showProgress` input on `matButton` and the `progressIndicator` attribute on a projected element. The old approach required manually swapping button content with a spinner using `@if`, which caused layout width jumps as the button resized. The new approach keeps the label in the DOM while the spinner is shown, preventing the janky resize. The `progressIndicator` slot accepts any custom loading element, not just `mat-progress-spinner`, making it flexible for custom design systems.