Migrating angular-block-ui to modern Angular
angular-block-ui covered the page or a section with an overlay and a message while $http requests were running, either automatically or through the blockUI service. It is tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| Your own BlockUiService with CDK Overlay | A full-screen or per-section overlay you control, with a counter of active blocks. |
| ngx-spinner | When you want a ready-made full-screen spinner with show and hide calls. |
| Disabled state on the form or button | Often the better fix: block only the action that is running, not the whole page. |
How to migrate it
- Find where blocking is automatic (every request) and where the code calls start and stop by hand.
- Create a service with a counter, so nested start and stop calls do not unblock the screen too early.
- Replace automatic blocking with explicit loading states on the screens you migrate.
Watch out. An overlay that only hides the page visually still lets keyboard users reach the controls behind it. Trap focus or set the inert attribute on the blocked content.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn