Angular PrimeNG Inplace Methods

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

The Inplace component is used to provide an easy to do editing and display to the user. When the output of the Inplace component is clicked the content is revealed. There are two methods for the Inplace components which are listed below.

Angular PrimeNG Inplace Methods:

• activate: This method activates the Inplace content.
• deactivate: This method deactivates the Inplace content.

Angular PrimeNG Inplace Templates:

• display: This template is used to specify the display part of the Inplace.
• content: This template is used to specify the content part of the Inplace.

Syntax:

// File: app.component.html
<p-inplace #inplace>
    <ng-template pTemplate="display">
        ...
    </ng-template>
    <ng-template pTemplate="content">
        ...
    </ng-template>
</p-inplace>

// File: app.component.ts
this.inplace.activate();
this.inplace.deactivate();

Creating Angular Application and Installing the Module:

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 activate method of the inplace component to activate its content. We form the method by attaching it to the button click.

• app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Templates</h3>

<button
    pButton
    label="Activate Inplace"
    (click)="inplaceActivate()"
    class="mb-6">
</button>

<p-inplace #inplace>
    <ng-template pTemplate="display">
        Click to see image
    </ng-template>
    <ng-template pTemplate="content">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png"
            width="200">
    </ng-template>
</p-inplace>

• app.component.ts:

Javascript

import { Component, ViewChild } from "@angular/core";
import { Inplace } from "primeng/inplace";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent {
    @ViewChild('inplace') ip!: Inplace;
    inplaceActivate() {
        this.ip.activate();
    }
}

• app.module.ts:

Javascript

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we used both the deactivate and activate methods of the Inplace component to activate and deactivate the inplace content.

• app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Templates</h3>

<button
    pButton
    label="Activate Inplace"
    (click)="inplaceActivate()"
    class="mb-4 mr-3">
</button>

<button
    pButton
    label="Deactivate Inplace"
    (click)="inplaceDeactivate()"
    class="mb-4">
</button>

<p-inplace #inplace>
    <ng-template pTemplate="display">
        Click to see image
    </ng-template>
    <ng-template pTemplate="content">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png"
            width="200">
    </ng-template>
</p-inplace>

• app.component.ts:

Javascript

import { Component, ViewChild } from "@angular/core";
import { Inplace } from "primeng/inplace";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent {
    @ViewChild('inplace') ip!: Inplace;
    inplaceActivate() {
        this.ip.activate();
    }

    inplaceDeactivate() {
        this.ip.deactivate();
    }
}

• app.module.ts:

Javascript

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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