Angular Loading Indicators Simplified | Step by Step Guide 2025

[@urtaav639]

The best video, very good explained!

[@ZoaibKhan]

Glad you liked it :)

[@aram5642]

you might want to experiment with tapResponse and the `finalize` in its callback to switch `loading` off

[@ZoaibKhan]

Yup, I use tapResponse and finalize whenever I call an API using rxMethod. Here I just used promise based function, so used the finally block...

[@aram5642]

@@ZoaibKhan Cool! 🤟

[@ivanpavlovich4891]

Thanks for the video! I want to ask you how to show loader in angular ssr with observables(when data loading via async pipe on server side)?

[@ZoaibKhan]

I don't have much experience with the new SSR in Angular, so can't say much. But I think what you're looking for might be the defer block with the new hydration option. It has a built in loading placeholder where we can specify this...

[@ivanpavlovich4891]

@@ZoaibKhan I also have an issue with the loading-container in which I'm projecting a mat-button with a mat-icon and text. The styles from the button are broken because, as I believe, the styles from mdc-button-label aren't working properly. The label has display: flex, so if we don't use a container, the icon and text are aligned next to each other. However, when they are inside a loading-container , the flex property on the mdc-button-label doesn't work as expected, and the icon ends up above or below the text.

[@haroldpepete]

great video but i think make a component to encapsulate other component is not necessary, you can use if statement and display loader component or display the info

[@ZoaibKhan]

yeah, it's not necessary. Just a nice to have for when you'll be doing the same thing repeatedly in different places of the app.

[@ArqamRafay-i2x]

Github code please ?

[@ZoaibKhan]

It's part of the dashboard - which is only available as paid template unfortunately.

[@ArqamRafay-i2x]

@@ZoaibKhan ok can you share me the template link

[@ZoaibKhan]

In the description :)