Angular PrimeNG Inplace Events
Last Updated :
08 Nov, 2022
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.
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 >
|
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"
})
}
}
|
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.
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 >
|
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"
})
}
}
|
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
Share your thoughts in the comments
Please Login to comment...