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
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.