События Angular PrimeNG Inplace

Опубликовано: 23 Февраля, 2023

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

Technical Scripter Picked AngularJS

События Angular PrimeNG Inplace

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ