define BlockUi Angular annotations at runtime?

Question

I have a repeatable component, wherein each component needs its own unique blocker. I said "Ok, that makes sense"

I have a blockUI implemented which will activate across all components with the defined string. In an attempt to handle modularization, I was trying to create an annotation which was dynamic on run, leveraging a guid. The issue is that the template and the annotation need to reference the same thing.

In an attempt to create this, I figure to create a GUID on a per component basis, called: widgetGuid. I saw that on init, when looking at the block property:

@BlockUI(`widget-content`) block: NgBlockUI;

that there was a name property which i could set. So in init, i did:

this.block.name = `${this.block.name}-${this.widgetGuid}`;

and then in the markup I set it from a static string to:

// I also attempted some hardcoding as well: 
//    *blockUI="'widget-content'+widgetGuid" and that also failed.
*blockUI="block.name"

but it seems that as soon as i started touching the block name, the spinners no longer functioned.

This has to have been addressed before, but im not sure what I may have been doing wrong.

Answer 1

NgBlockUi has a means to do this, after looking deep into the codebase.

First, we will not need the decorator, BUT will need the variable for assignment.

import { NgBlockUI } from 'node_modules/ng-block-ui';
import { BlockUIInstanceService } from 'ng-block-ui/lib/services/block-ui-instance.service';
import { Guid } from "src/utilities/guid.ts";  //A TS Guid Generator.

export class TestComponent implements OnInit {
    block: NgBlockUI;

    constructor( private _blockService: BlockUIInstanceService) {}

    ngOnInit() {
        let blockName = `widget-content-${Guid.newGuid()}`;
        this.block = this.blockService.decorate(blockName);
    }
}

Markup:

<div *BlockUI="block.name">Hello World</div>

Therefore, Each instance of the Component will get a uniquely defined guid and will have its own unique reference to block.