Angular PrimeNG Inplace Properties

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for various tasks like inputs, menus, charts, Buttons, etc. In this article, we will be seeing Angular PrimeNG Inplace Properties.

The Inplace component is used to provide editing and display at the same time. When we click the Inplace component, it reveals the output. 

Angular PrimeNG Inplace Properties:

• active: It is a boolean property that defines whether the content is displayed. The default value is false.
• disabled: This boolean property is used to specify whether the component is disabled. The default value is false.
• closable: When this property is set to true, a button is displayed when the inplace component is in output mode which switches the state of the inplace back to display. The default value is false.
• preventClick: When this property is set to true, the component will not respond to the click and can be controlled programmatically using the activate() and deactivate() methods.
• style: It is the inline style of the component. It accepts string values and the default value is “null”. 
• styleClass: It is the style class of the component. It accepts string values and the default value is “null”. 
• closeIcon: This property is used to specify the icon for the close button. It accepts string values and the default value is “pi pi-times”.

Syntax:

<p-inplace 
    style="..." 
    styleClass="..." 
    closeIcon="..." 
    [disabled]="...">
    ...
</p-inplace>

Creating Angular Application and Installing the Modules:

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

ng new appname

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

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the disabled property of the inplace component to disable it.

app.component.html

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

<div>
    <p-inplace styleClass="mb-4">
        <ng-template pTemplate="display">
            Click to Display The Table
        </ng-template>
        <ng-template pTemplate="content">
            <p-table [value]="people" responsiveLayout="scroll">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Name</th>
                        <th>Profession</th>
                        <th>Age</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-person>
                    <tr>
                        <td>{{person.name}}</td>
                        <td>{{person.profession}}</td>
                        <td>{{person.age}}</td>
                    </tr>
                </ng-template>
            </p-table>
        </ng-template>
    </p-inplace>

    <!-- Disabled Inplace -->
    <p-inplace [disabled]="true">
        <ng-template pTemplate="display">
            Click to Display The Table
        </ng-template>
        <ng-template pTemplate="content">
            <p-table [value]="people" responsiveLayout="scroll">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Name</th>
                        <th>Profession</th>
                        <th>Age</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-person>
                    <tr>
                        <td>{{person.name}}</td>
                        <td>{{person.profession}}</td>
                        <td>{{person.age}}</td>
                    </tr>
                </ng-template>
            </p-table>
        </ng-template>
    </p-inplace>
</div>

app.component.ts

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

interface Person {
    name: String
    profession: String
    age: Number
}

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

    ngOnInit() {
        this.people = [
            {
                name: "Jonh",
                profession: "Doctor",
                age: 31
            },
            {
                name: "Glen",
                profession: "Engineer",
                age: 23
            },
            {
                name: "Shyam",
                profession: "Builder",
                age: 35
            },
            {
                name: "Rohit",
                profession: "Developer",
                age: 25
            },
            {
                name: "Prateek",
                profession: "Teacher",
                age: 41
            },
            {
                name: "Roshan",
                profession: "Student",
                age: 22
            },
        ];
    }
}

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 { InplaceModule } from 'primeng/inplace';
import { TableModule } from 'primeng/table';

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

Output:

Example 2: In this example, we used the closable and closeIcon property of the inplace to display an image and revert back to the text when clicking the close button.

app.component.html

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

<div>
    <p-inplace
        [closable]="true"
        closeIcon="pi pi-ban">
        <ng-template pTemplate="display">
            Click to Show Image
        </ng-template>
        <ng-template pTemplate="content">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220917010135/geeksforgeeks.png">
        </ng-template>
    </p-inplace>
</div>

app.component.ts

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

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

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 { InplaceModule } from 'primeng/inplace';
import { TableModule } from 'primeng/table';

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

Output:

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