Inplace Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.

Basic

Click to Edit

Image

View Picture Nature

Data

View Data

Import


import {InplaceModule} from 'primeng/inplace';

Getting Started

Inplace requires two child components having pInplaceDisplay and pInplaceOutput attributes to define the content of each state.


<p-inplace>
    <span pInplaceDisplay>
        Click to Edit
    </span>
    <span pInplaceContent>
        <input type="text" value="PrimeNG" pInputText>
    </span>
</p-inplace>

Properties

Name Type Default Description
active boolean false Whether the content is displayed or not.
disabled boolean false When present, it specifies that the element should be disabled.
closable boolean false Displays a button to switch back to display mode.
style string null Inline style of the component.
styleClass string null Style class of the component.

Events

Name Parameters Description
onActivate event.originalEvent: Click event Activates the content.
onDeactivate event.originalEvent: Click event Deactivates the content.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-inplace Container element
ui-inplace-display Display container
ui-inplace-content Content container

Dependencies

None.

View on GitHub

<h3 class="first">Basic</h3>
<p-inplace closable="closable">
    <span pInplaceDisplay>
        Click to Edit
    </span>
    <span pInplaceContent>
        <input type="text" value="PrimeNG" pInputText>
    </span>
</p-inplace>

<h3>Image</h3>
<p-inplace>
    <span pInplaceDisplay>
        <span class="fa fa-picture-o"></span><span style="margin-left:8px">View Picture</span>
    </span>
    <span pInplaceContent>
        <img src="assets/showcase/images/demo/galleria/galleria5.jpg" alt="Nature">
    </span>
</p-inplace>

<h3>Data</h3>
<p-inplace>
    <span pInplaceDisplay>
        <span class="fa fa-table"></span><span style="margin-left:8px">View Data</span>
    </span>
    <span pInplaceContent>
        <p-dataTable [value]="cars">
            <p-column field="vin" header="Vin"></p-column>
            <p-column field="year" header="Year"></p-column>
            <p-column field="brand" header="Brand"></p-column>
            <p-column field="color" header="Color"></p-column>
        </p-dataTable>
    </span>
</p-inplace>