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

Question

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.

Answer 1

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

Answer 2

You can use a CSS based approach to block individual card UI.

Use the card-blocker class to your card and it will create a UI blocker on the top of the card making it inaccessible.

<div class="card card-blocker" (click)="onClick($event)">
   // card body
<div>

.card-blocker::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(192,192,192,0.1);
 }

Also if you want to explicitly prevent any click event, use the method in your component side:

onClick(e: Event): void {
    if ((e.target as HTMLElement).classList.contains('card-blocker')) {
        return;
    }

    // your logic for card click
}