Angular PrimeNG Inplace Templates

Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see Inplace Templates in Angular PrimeNG.

The Inplace component is used to edit and display the content in place of others and render the actual output when clicked. Inplace components have two templates named display and content.

Syntax:

<p-inplace >
    <ng-template pTemplate="display">
        ...
       </ng-template>
       <ng-template pTemplate="content">
           ...
       </ng-template>
</p-inplace>

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command.

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, the project structure will look like the following:

Example 1: This example shows the use of the inplace component templates to display a text and edit it when clicked. 

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Inplace Templates</h3>

<p-inplace [closable]="true">
    <ng-template pTemplate="display">
        {{text}}
    </ng-template>
    <ng-template pTemplate="content">
        <input
            type="text"
            [value]="text"
            pInputText
            [(ngModel)]="text">
    </ng-template>
</p-inplace>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {
    text: String = "GeeksforGeeks";
}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms";
import { TableModule } from "primeng/table";
import { InplaceModule } from 'primeng/inplace';
import { InputTextModule } from 'primeng/inputtext';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        TableModule,
        InplaceModule,
        InputTextModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This example shows the use of the inplace component to display a text and when we click the text the image appears.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Inplace Templates</h3>

<p-inplace [closable]="true">
    <ng-template pTemplate="display">
        Click to Display Image
    </ng-template>
    <ng-template pTemplate="content">
        <img
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220915000203/download.png"
            alt="geeksforgeeks-logo">
    </ng-template>
</p-inplace>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {
    text: String = "GeeksforGeeks";
}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms";
import { TableModule } from "primeng/table";
import { InplaceModule } from 'primeng/inplace';
import { InputTextModule } from 'primeng/inputtext';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        TableModule,
        InplaceModule,
        InputTextModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/inplace