New Component: Inplace

[cagataycivici]

Inspired by PrimeFaces inplace;

http://www.primefaces.org/showcase/ui/input/inplace.xhtml

[bakasmarius]

Is it possible to close (deactivate) p-inplace using code only and avoiding the close button?
for example:

          <p-inplace closable="closable" id="pInplace">
              <span pInplaceDisplay>Some text</span>
              <span pInplaceContent>
                <p-autoComplete
                  (onSelect)="pInplace.close();">
                </p-autoComplete>                      
              </span>
          </p-inplace>

What could I actually call in onSelect for p-inplace to actually deactivate?

[MohammedFCIS]

@bakasmarius, Hello did you manage to do that? thank you

[bakasmarius]

Hi @MohammedFCIS, no - I ended up not using this component at all.

[cagataycivici]

We'll add collapsed property so you can bind to it also add a public method.

[cagataycivici]

Just realized we have a property already named active;

<p-inplace closable="closable" [style]="{'min-height':'30px'}" [active]="active">
        <span pInplaceDisplay>
            Click to Edit
        </span>
        <span pInplaceContent>
            <input type="text" value="PrimeNG" pInputText>
        </span>
    </p-inplace>
    
    <button (click)="active=!active">Toggle</button>

[MohammedFCIS]

Thank you @bakasmarius for reply, hoping the best for you

[sgentile]

My understanding is a control that switches from label to text should return back to label onblur vs. staying open and requiring the user to select an 'x' ?

[sgentile]

I have to click the toggle button twice in the example above for it to work for me

[chriskali]

@sgentile
Same behavior on me. Did you solved it?