Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
import { InplaceModule } from 'primeng/inplace';
Inplace component requires display and content templates to define the content of each state.
<p-inplace>
<ng-template pTemplate="display">
<span>View Content</span>
</ng-template>
<ng-template pTemplate="content">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</ng-template>
</p-inplace>
Inplace can be used within a form to display a value as read only before making it editable. The closable property adds a close button next to the content to switch back to read only mode.
<p-inplace closable="closable">
<ng-template pTemplate="display">
<span>Click to Edit</span>
</ng-template>
<ng-template pTemplate="content">
<input type="text" value="PrimeNG" pInputText />
</ng-template>
</p-inplace>
Any content such as an image can be placed inside an Inplace.
<p-inplace>
<ng-template pTemplate="display">
<div class="inline-flex align-items-center">
<span class="pi pi-image" style="vertical-align: middle"></span>
<span class="ml-2">View Picture</span>
</div>
</ng-template>
<ng-template pTemplate="content">
<img src="https://primefaces.org/cdn/primeng/images/demo/galleria/galleria5.jpg" alt="Nature" />
</ng-template>
</p-inplace>
<p-inplace>
<ng-template pTemplate="display">
<div class="inline-flex align-items-center">
<span class="pi pi-table" style="vertical-align: middle"></span>
<span class="ml-2">View Data</span>
</div>
</ng-template>
<ng-template pTemplate="content">
<p-table [value]="cars" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{ car.vin }}</td>
<td>{{ car.year }}</td>
<td>{{ car.brand }}</td>
<td>{{ car.color }}</td>
</tr>
</ng-template>
</p-table>
</ng-template>
</p-inplace>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-inplace | Container element |
| p-inplace-display | Display container |
| p-inplace-content | Content container |
Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.
Display element uses button role in view mode by default, displayProps can be used for customizations like adding aria-label or aria-labelledby attributes to describe the content of the view mode or even overriding the default role.
Closable inplace components displays a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize the element and override the default aria-label.
| Key | Function |
|---|---|
| enter | Switches to content. |
| Key | Function |
|---|---|
| enter | Switches to display. |
| space | Switches to display. |
API defines helper props, events and others for the PrimeNG Inplace module.
| 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. |
| preventClick | boolean | false | When enabled, instead of click events, the component can be controlled full programmatic with activate() and deactivate() functions. |
| style | string | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| closeIcon | string | null | Icon of the close icon. |
| Name | Parameters |
|---|---|
| content | - |
| display | - |
| closeicon | - |
| Name | Parameters | Description |
|---|---|---|
| onActivate | event.originalEvent: Click event | Activates the content. |
| onDeactivate | event.originalEvent: Click event | Deactivates the content. |
| Name | Parameters | Description |
|---|---|---|
| activate | - | Activates the content. |
| deactivate | - | Deactivates the content. |