Primeng: BlockableUI interface asking me to implement getBlockableElement()

[mohan1304]

BlockableUI interface asking me to implement getBlockableElement(). What should I return from this method?

From definition I understood it is the HTMLElement but what if I want to use BlockUI for multiple elements

[mohan1304]

I am referring to this comment from documentation "To block a certain component, define a local template variable and bind it to the target option. The target component must implement the BlockableUI interface, otherwise an exception is thrown."

When I try to implement it for one of div element in my component it was always throwing exception. and it works fine for whole document.

[jmesa-sistel]

@mohan1304 you have an example here
https://github.com/primefaces/primeng/blob/master/components/panel/panel.ts#L93

[cagataycivici]

A dom element to block, panel is a good example.

[baigail93]

Why is this closed, does it only available on primeng components like panel? What if I want to block a certain div?

[mlakhara]

@baigail93 You will have to create a container component which implements this method and returns the reference to the child div in this case.

[jmesa-sistel]

here you have a simple example:

import { Component, ElementRef, Input } from '@angular/core';
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];
    }

}

now you can create a special blockable div using the tag blockable-div.

Example on how to use it:

in your ts define a boolean var:
blockDiv: boolean;
in your html

<p-blockUI [target]="pblockableDiv" [blocked]="blockDiv"></p-blockUI>
<blockable-div #pblockableDiv class="yourclasses" >

</blockable-div>

Now you can block what you need

[baigail93]

@jmesa-sistel tried that but didn't worked. I get this error

Can't bind to 'target' since it isn't a known property of 'p-blockUI'.

1. If 'p-blockUI' is an Angular component and it has 'target' input, then verify that it is part of this module.
2. If 'p-blockUI' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have added the new component to the module though!

[jmesa-sistel]

@baigail93
Have you imported BlockUIModule in in your app.module.ts?
import {BlockUIModule} from 'primeng/primeng';

@NgModule({
declarations: [
 .....
],
  imports: [
... ,
BlockUIModule ,
....
],
....

[baigail93]

@jmesa-sistel Yes I did

[jmesa-sistel]

@baigail93 p-blockUI is a primeng component which is in BlockUIModule, if your app does not find the component you are not importing the module.
Maybe you have different modules.ts (@NgModule), and your component is inside another @NgModule

[baigail93]

I have added all such common tasks in a shared module and imported it in all other modules. I added BlockUIModule just like all other modules from primeng in that shared module. It gives the same error if I import it directly in the module using it.

p-blockUI works separately if I give it a target of p-panel which is strange.

[jmesa-sistel]

Have you created a ngmodule for 'blockable-div' component? I am using as a simple component in my app, I am not creating an external component to be reused in other apps.
I can not help you without code or a plunker

uhmm
Have you added BlockableDiv in declarations section in @NgModule ?

import { BlockableDiv } from './components/blockablediv/blockablediv.component';

@NgModule({
  declarations: [
    AppComponent,
   ..... ,
    BlockableDiv,
 .....

[leslysmile]

@jmesa-sistel thanks for the hint. yes by checking the panel module we know that the panel inherits the BlockableUI interface. however we need to add the css "position: relative" in the template to make the blockui in the div but not the whole page. it took me an hour to get this.