Scope only for given component
See original GitHub issueI 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?
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
scope - CSS: Cascading Style Sheets - MDN Web Docs
The :scope CSS pseudo-class represents elements that are a reference point for selectors to match against. Currently, when used in a stylesheet ...
Read more >Scope components to one or more applications - Dapr Docs
Application scopes added to a component limit only the applications with specific IDs from using the component.
Read more >Dagger2 what is the purpose of adding a scope tag to ...
You can specify only one scope on a given component, and in a scoped component, you can only have modules with that scope...
Read more >Developer Guide: Scopes - AngularJS: API
Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the "AngularJS realm" (controllers, services, ......
Read more >Scopes - ComponentKit
Scopes give ComponentKit the ability to assign any component with a persistent identity: regardless of how many times a component is created it...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@MichalJakubeczy
table
(or in your exampleresults-table
) is the name for blockUI to target when dispatching the start/stop events. So when you callthis.blockUI.start()
it will dispatch a start event targetingtable
. Any blockUI directives that are passedtable
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 withtable
such astable-<unique-guid>
and you will have to passblockUI.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.Fixed by #113