Scope only for given component

I have multiple components of the same type on a page where following *blockUI attribute is defined. <table *blockUI="'results-table'">

In the ts file I reference BlockUI like this: @BlockUI('results-table') public blocker: NgBlockUI;

The problem is that when I trigger blocker.start('Please wait')

All of components become ‘busy’ (because of the same identifier). But I need to make busy only the one in a particular instance. Yes, they can be distinguished by various names, but it is the same component.

Is there any possibility to trigger start only for a blocker on a current instance?

[kuuurt13]

@MichalJakubeczy table (or in your example results-table) is the name for blockUI to target when dispatching the start/stop events. So when you call this.blockUI.start() it will dispatch a start event targeting table. Any blockUI directives that are passed table as its name (in any template) will then start blocking (*blockUI="'table'"). The reason you ran into your issue is that all your components were using the same name and currently blockUI uses the same instance for all components so all were started when you called start.

So what needs to happen is a unique name needs to be created for each instance of a component and then that unique name needs to be passed to the directive. That way when start is called it will use the unique name that both the component and its template share. So what I want to do is that when you pass { isScoped: true } the library will create a unique block name with table such as table-<unique-guid> and you will have to pass blockUI.name to the directive so the blockUI instance and the directive share the same unique name.

Anyway, I have started working on this and I have an initial proof of concept working so I should be able to roll this into the upcoming 3.0.0 release, I will keep you posted.

[kuuurt13]

Fixed by #113