Angular Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {InplaceModule} from 'primeng/inplace';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Inplace requires two templates named display and content to represent the each state.
<pre><code class="lang-html">&lt;p-inplace &gt;
 &lt;ng-template pTemplate="display"&gt;
 Click to Edit
 &lt;/ng-template&gt;
 &lt;ng-template pTemplate="content"&gt;
 &lt;input type="text" value="PrimeNG" pInputText&gt;
 &lt;/ng-template&gt;
&lt;/p-inplace&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Inplace supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/inplace">Inplace</a> showcase for demos and documentation.

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

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {InplaceModule} from 'primeng/inplace';
```

### Getting Started

Inplace requires two templates named **display** and **content** to represent the each state.

```html
<p-inplace >
 <ng-template pTemplate="display">
 Click to Edit
 </ng-template>
 <ng-template pTemplate="content">
 <input type="text" value="PrimeNG" pInputText>
 </ng-template>
</p-inplace>
```

### Theming

Inplace supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Inplace](https://primefaces.org/primeng/showcase/#/inplace) showcase for demos and documentation.