NG Block UI
A Block UI implementation for Angular
Add to your project via npm
npm install ng-block-ui --save
BlockUIModule in your main app module.
// All other imports;
Wrap your main components in your app root template with a
BlockUI decorator into your component and declare a property with the decorator.
This decorator will auto wire this property to the main Block UI instance of your app.
To start blocking your app, simply invoke the
This method also can take a custom message to display while blocking.
Once finished call the
stop method to stop blocking the app.
;// Import BlockUI decorator & optional NgBlockUI type;
For more information and/or migrating to the newest version see Releases.
Settings can be changed on the module level and component/directive level. Also, in some cases settings can be overwritten via the method level.
A default message can be configured to be shown instead of passing a message each time to the
start method. The default message will be shown any time blocking is activated.
||Custom message to be displayed while blocking.|
<!-- Markup here -->
When blocking with fast service calls the block overlay can flicker for a small amount of time.
To prevent this a
delayStart and a
delayStop can be configured to prevent this scenario.
||Waits given amount of milliseconds before starting to block.|
||Waits given amount of milliseconds before stopping current block.|
<!-- Your app markup here -->
If you want to display other markup than the default spinner and message then you can provide a custom template.
Custom templates can be provided as a
TemplateRef. The template will then be used instead of the default template whenever blocking.
||Custom template to be used when blocking|
Component Custom Template
Create a component and declare it in your app module.
The component also will need to be added to the
entryComponents property of the module.
Note: When providing a
Component as a template just add the
interpolation to your template and it will display your default message or the message passed to the
// Template component// Use block-ui-template class to center div if desired
TemplateRef Custom Template
<ng-template> with a template reference variable to the view. Then pass the template reference variable to the
blockUI component using the
Note: TemplateRef templates can only be set on a Component level.
Block UI Directive
Sometimes you want to only apply blocking to a certain element in your app. The Block UI directive can be added to an element to apply blocking only to that specific element.
*blockUI structural directive to any element
and pass it an instance name
Then in a component create a class property using the Block UI decorator with the instance name
@BlockUI('contact-list'). This will then take care of wiring up that property to point to that specific instance in your app.
Angular has a specific syntax for passing properties to structural directives. Properties are passed in
key: value; pair. To pass settings to a Block UI directive they must be passed as shown below.
NgBlockUI Instance Properties
Below highlights all the properties that can be found on a BlockUI instance when a class property is decorated with the
||Name of the targeted instance (defaults to main instance).|
||Indicates if the targeted instance is blocking.|
||Starts blocking for instance, can be passed an optional message.|
||Stops blocking for instance.|
||Stops blocking for all targeted instances regardless of the
||Stops blocking app wide for all instances regardless of the
||Updates current instances blocking message with the passed message.|
||Unsubscribe an instance so it no longer can be blocked. All BlockUI components/directives unsubscribe by default during
NgBlockUI Instance Settings
Below are all the settings that can be passed as a second argument to the
@BlockUI() decorator (
||When set to
In some cases you may want to have more control over all the instances in you app.
Instead of declaring separate instances with the
@BlockUI() decorator you can use the
BlockUIService. This service allows you to easily target multiple instance across your app.
||Indicates if the targeted instance(s) is blocking.|
||Starts blocking for a single instance or multiple instances by passing instance name(s).|
||Stops blocking for a single instance or multiple instances by passing instance name(s).|
||Updates message for a single instance or multiple instances by passing instance name(s).|
||Resets blocking for a single instance or multiple instances by passing instance name(s).|
||Resets blocking app wide for all instances.|
||Unsubscribes a single instance or multiple instances by passing instance name(s).|