События Angular PrimeNG Inplace
Angular PrimeNG — это библиотека компонентов пользовательского интерфейса, созданная PrimeTek для помощи разработчикам Angular в упрощении процесса разработки согласованных и масштабируемых веб-интерфейсов за меньшее время. В этой статье мы увидим Inplace Events в Angular PrimeNG.
Компонент Inplace используется вместо других компонентов, и когда пользователь щелкает вывод компонента Inplace, отображается фактический компонент. Отображение и содержимое Inplace можно указать с помощью шаблонов отображения и содержимого . Есть два события компонента Inplace, которые описаны ниже:
События Angular PrimeNG Inplace:
- onActivate: это событие компонента Inplace запускается при активации содержимого.
- onDeactivate: это событие компонента Inplace запускается при активации содержимого.
Свойства событий Inplace Angular PrimeNG:
- closable: это свойство используется для закрытия содержимого на месте путем отображения кнопки закрытия.
Синтаксис:
<p-inplace (event)="callBack()"> <ng-template pTemplate="display"> ... </ng-template> <ng-template pTemplate="content"> ... </ng-template> </p-inplace>
Создание приложения и установка необходимых модулей:
Шаг 1: Создайте приложение Angular с помощью следующей команды.
ng new my_app
Шаг 2: После создания приложения перейдите в папку проекта с помощью команды, написанной ниже.
cd new_app
Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет такой, как показано на рисунке ниже:
Пример 1. В этом примере показано использование события onActivate объекта Inplace для отображения всплывающего сообщения.
- 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 { } |
Выход:
Пример 2. В этом примере показано использование события onDeactivate объекта Inplace для отображения всплывающего сообщения пользователю.
- 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 { } |
Выход:
Ссылка: https://www.primefaces.org/primeng/inplace