Angular PrimeNG Inplace Events

Angular PrimeNG is a UI component library built by PrimeTek for helping out Angular developers for easing the process of developing consistent and scalable web interfaces in less time. In this article, we will see the Inplace Events in Angular PrimeNG.

The Inplace Component is used in place of other components and when the user clicks the output of the Inplace component the actual component gets displayed. The display and the content of the Inplace can be specified using the display and the content templates. There are two events of the Inplace component, which are described below:

Angular PrimeNG Inplace Events:

• onActivate: This event of the Inplace component gets triggered when the content gets activated.
• onDeactivate: This event of the Inplace component gets triggered when the content gets activated.

Angular PrimeNG Inplace Events Properties:

• closable: This property is used to make the inplace content closable by displaying a close button.

Syntax:

<p-inplace 
    (event)="callBack()">

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

Creating the Application and Installing the required Modules:

Step 1: Create the Angular app using the following command.

ng new my_app

Step 2: After creating the app, move to the project folder using the command written below.

cd new_app

Step 3: Finally, Install the following modules in your project directory

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

Project Structure: The project structure will as shown in the below picture:

Project Structure

Example 1: This example shows the use of the onActivate event of the Inplace to show a toast message.

• app.component.html

HTML

<div style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Inplace Events
    </h4>

    <p-inplace (onActivate)="inplaceOnActivate()">
        <ng-template pTemplate="display">
            Click Here to Display Content
        </ng-template>
        <ng-template pTemplate="content">
            <button pButton type="button"
                            label=
            "This is the Inplace Content">
            </button>
        </ng-template>
    </p-inplace>
</div>
<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})

export class AppComponent {
    constructor(private mSer: MessageService) { }
    inplaceOnActivate() {
        this.mSer.add({
            severity: "success",
            summary: "Inplace Content is now Active",
            detail: "GeeksforGeeks"
        })
    }
}

• app.module.ts

Javascript

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

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

Output:

Example 2: In this example, the use of the onDeactivate event of the Inplace is shown to show a toast message to the user.

• app.component.html

HTML

<div style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Inplace Events
    </h4>

    <p-inplace (onDeactivate)="inplaceOnDeactivate()"
               [closable]="true">
        <ng-template pTemplate="display">
            Click Here to Display Content
        </ng-template>
        <ng-template pTemplate="content">
            <button pButton class="mr-4"
                            type="button"
                            label=
            "This is the Inplace Content">
            </button>
        </ng-template>
    </p-inplace>
</div>
<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})

export class AppComponent {
    constructor(private mSer: MessageService) { }
    inplaceOnDeactivate() {
        this.mSer.add({
            severity: "error",
            summary: "Inplace Content is now Deactive",
            detail: "GeeksforGeeks"
        })
    }
}

• app.module.ts

Javascript

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

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

Output:

Reference: https://www.primefaces.org/primeng/inplace