Angular 8 , 9 : How to block individual reusable component(ng-block-ui integrated) that used multiple time in a page | ie. create multiple instances?

I have used the component (with ng-block-ui integrated) in a page component. It fires both the block-ui event if I click to any one.

I want to block the UI of that specific card which I clicked.

I found the answer!! to this problem.

By providing randomly generated id each time the component gets called, and targeting that ID in call of block-ui instance it worked

  // Generate random string  assign to specific
  // core-card to only block that specific card

  public coreCardId: string = Math.random().toString(36).substring(2);


  // block ui on 'reload' method call
  reload(event) {
    this.blockUIService.start(this.coreCardId);

    // block-ui timeout
    setTimeout(() => {
      this.blockUIService.stop(this.coreCardId);
    }, 2500);
  }

I have used Block-ui service for this :

// ng-block-ui service
import { BlockUIService } from 'ng-block-ui';

It helped me to target that specific id that I clicked and want to block that element in HTML

SEE IMAGE FOR MORE REFERENCE