NG Block UI

A Block UI implementation for Angular 2 & up

Installation

Add to project via npm

// Angular 2.x
npm install ng-block-ui --save

-- or --

// Angular 4.x
npm install ng-block-ui@next --save

Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add ng-block-ui to the SystemJS configuration:

System.config({
  // Existing configuration options
  map: {
    ...
    'ng-block-ui': 'npm:ng-block-ui/bundles/umd',
    ...
  },
  packages: {
    ...
    'ng-block-ui': {
        main: 'index.js',
        defaultExtension: 'js'
    },
    ...
  }
});

Include the BlockUIModule in your main app module.

// All other imports
import { BlockUIModule } from 'ng-block-ui';

@NgModule({
  declarations: [
   ... // Your main app component
  ],
  imports: [
    ..., // Other imports
    BlockUIModule
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage

Block UI Component

Wrap all components in your app root template with a block-ui component.

Import the BlockUI decorator into your component and declare a variable with the decorator. This decorator will auto wire this variable to the main Block UI instance of your app.

To start blocking your app, simply invoke the start method. This method also can take a custom message to display while blocking. Once finished call the stop method to stop blocking the app.

import { Component } from '@angular/core';

// Import BlockUI decorator & optional NgBlockUI type
import { BlockUI, NgBlockUI } from 'ng-block-ui';

@Component({
  selector: 'app-root',
  template: `
    <block-ui>
      <!-- Your app markup here -->
    </block-ui>
  `
})
export class AppComponent {
  // Decorator wires up blockUI instance
  @BlockUI() blockUI: NgBlockUI;

  constructor() {
    this.blockUI.start('Loading...'); // Start blocking

    setTimeout(() => {
      this.blockUI.stop(); // Stop blocking
    }, 2000);
  }

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.

Add the *blockUI structural directive to any element and pass it an instance name *blockUI="'contact-list'".

Then in a component create a variable using the Block UI decorator with the instance name. This will then take care of wiring up that variable to point to that specific instance in your app @BlockUI('contact-list').

... // Imports

@Component({
  selector: 'app-cmp',
  template: `
    <div>
      <!-- Other markup -->
      <div *blockUI="'contact-list'">
        <!-- List markup -->
      </div>
    </div>
  `
})
export class AppComponent {
  // Pass instance name to decorator
  @BlockUI('contact-list') blockUIList: NgBlockUI;

  constructor() {
    this.blockUIList.start('Loading...'); // Start blocking element only
    this.blockUIList.stop(); // Stop blocking
  }

Examples

BlockUI Component - Plunker