Having a primeng BlockableUI interfaced component with minimal style

user_1775513 0
Viewed 3607

I'm attempting to use the primeng block UI component to block one panel. The example uses p-panel as the wrapper and I've implemented it like this:

    <p-blockUI [blocked]="blockUI" [target]="pnl"></p-blockUI>
    <p-panel #pnl [showHeader]="false">
        <div [class]="myPanelClass" *ngIf="data?.IsVisible">
            <p-card [style]="{'width': '100%', 'height': '365px', 'margin-top': '10px'}">
                <app-component></app-component>
            </p-card>
        </div>
    </p-panel>

The problem is that adding the p-panel around my existing "div" throws everything off because of the p-panel's styling. Is there another component that would act like a simple "div" that could be used?

primeng angular
2 Answers

I think the only way is to create own component which implements BlockableUI interface: 

import { BlockableUI } from 'primeng/primeng';

@Component({
    selector: 'blockable-div',
    template: `        
        <div [ngStyle]="style" [ngClass]="class" ><ng-content></ng-content></div>
    `
})
export class BlockableDiv implements BlockableUI {

    @Input() style: any;
    @Input() class: any;

    constructor(private el: ElementRef) {
    }

    getBlockableElement(): HTMLElement { 
        return this.el.nativeElement.children[0];
    }

}

Credit to: https://github.com/primefaces/primeng/issues/2003

user_5223220

Primeng custom BlockableUI only works this way for now

<p-blockUI [target]="pnl" [blocked]="blockedPanel">
<i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>

<p-panel #pnl header="Panel Header">
    Content of Panel
</p-panel>

Whatever the content you want to block. Use it under p-panel and use p-panel id accordingly.

This worked under pr It's mentioned in the official site under "primeng": "^9.1.3"

user_92884550
Related