Dealing with a repeatable component where each instance requires its own unique blocker, I thought to myself "Okay, that makes sense."
I have already implemented a blockUI that is supposed to activate for all components with a specific defined string. To manage the modularization, I tried creating a dynamic annotation using a guid. The challenge is ensuring that both the template and annotation refer to the same thing.
To resolve this issue, I decided to generate a GUID for each component, named: widgetGuid. When examining the block property during initialization:
@BlockUI(`widget-content`) block: NgBlockUI;
I noticed there was a name property that could be set. Therefore, during initialization, I executed the following code:
this.block.name = `${this.block.name}-${this.widgetGuid}`;
Then in the markup, instead of using a static string, I updated it to:
// I also attempted some hardcoding as well:
// *blockUI="'widget-content'+widgetGuid" and that also failed.
*blockUI="block.name"
However, it seems that once I started modifying the block name, the spinners stopped functioning properly.
I'm certain this issue has been encountered before, but I'm not sure where I might have gone wrong.