Компонент Angular PrimeNG ConfirmPopup

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

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать компонент ConfirmPopup в Angular PrimeNG.

Компонент ConfirmPopup используется в качестве наложения подтверждения и отображается относительно цели.

Импорт: чтобы использовать ConfirmPopup, нам нужно импортировать следующий оператор в файл модуля:

import {ConfirmPopupModule} from "primeng/confirmpopup";
import {ConfirmationService} from "primeng/api";

Свойства компонента Angular PrimeNG ConfirmPopup:

ключ: когда дерево компонентов включает несколько диалогов подтверждения, необходимо использовать необязательный ключ, который соответствует ключу объекта подтверждения.
showTransitionOptions: используется для установки параметров перехода анимации шоу. Он имеет строковый тип и значение по умолчанию равно 0,12 с кубического безье (0, 0, 0,2, 1).
hideTransitionOptions: используется для установки параметров перехода анимации скрытия. Он имеет строковый тип, а значение по умолчанию — .1s linear.
autoZIndex: используется, чтобы решить, следует ли автоматически управлять слоями. Это логический тип, и значение по умолчанию — true.
baseZIndex: используется для установки базового значения zIndex, используемого при расслоении. Он имеет числовой тип и значение по умолчанию равно 0.
стиль: используется для установки встроенного стиля компонента. Он имеет строковый тип и значение по умолчанию равно null.
styleClass: используется для установки класса стиля компонента. Он имеет строковый тип и значение по умолчанию равно null.

Стиль компонента Angular PrimeNG ConfirmPopup:

p-confirm-popup: это элемент-контейнер.
p-confirm-popup-content: это элемент содержимого.
p-confirm-popup-icon: это значок сообщения.
p-confirm-popup-message: это текст сообщения.
p-confirm-popup-footer: элемент нижнего колонтитула для кнопок.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: Это будет выглядеть следующим образом:

Шаги для запуска приложения: Запустите приведенную ниже команду, чтобы увидеть результат:

ng serve --open

Пример 1: Ниже приведен пример кода, иллюстрирующий использование компонента Angular PrimeNG ConfirmPopup.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ConfirmPopup Component</h5>
  
<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<button 
    (click)="gfg($event)" 
    pButton icon="pi pi-code" 
    label="GeeksforGeeks">
</button>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
import {
    ConfirmationService,
    MessageService,
} from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
  
export class AppComponent {
    constructor(
        private confirmationService: ConfirmationService,
        private messageService: MessageService,
    ) {}
  
    gfg(event: Event) {
        this.confirmationService.confirm({
            target: event.target,
            message: "Confirm proceeding to check result geek?",
            icon: "pi pi-exclamation-triangle",
            accept: () => {
                this.messageService.add({
                    severity: "success",
                    summary: "WoW Geeks",
                    detail: "You are qualified in the interview."
                });
            },
            reject: () => {
                this.messageService.add({
                    severity: "error",
                    summary: "OOP"s",
                    detail: "You are rejected in the interview."
                });
            }
        });
    }
}

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 { ConfirmPopupModule } from "primeng/confirmpopup";
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { ConfirmationService, MessageService } from "primeng/api";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ConfirmPopupModule,
        ToastModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ConfirmationService, MessageService]
})
  
export class AppModule {}

Выход:

Пример 2: Ниже приведен еще один пример кода, который иллюстрирует использование компонента Angular PrimeNG ConfirmPopup с использованием параметров showTransitionOptions и hideTransitionOptions.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ConfirmPopup Component</h5>
  
<p-toast></p-toast>
<p-confirmPopup 
    [showTransitionOptions]="".8s"" 
    [hideTransitionOptions]="".9ms"">
</p-confirmPopup>
  
<button 
    (click)="gfg($event)" 
    pButton icon="pi pi-code" 
    label="GeeksforGeeks">
</button>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
import {
    ConfirmationService,
    MessageService,
} from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
  
export class AppComponent {
    constructor(
        private confirmationService: ConfirmationService,
        private messageService: MessageService,
    ) {}
  
    gfg(event: Event) {
        this.confirmationService.confirm({
            target: event.target,
            message: "Confirm proceeding to check result geek?",
            icon: "pi pi-exclamation-triangle",
            accept: () => {
                this.messageService.add({
                    severity: "success",
                    summary: "WoW Geeks",
                    detail: "You are qualified in the interview."
                });
            },
            reject: () => {
                this.messageService.add({
                    severity: "error",
                    summary: "OOP"s",
                    detail: "You are rejected in the interview."
                });
            }
        });
    }
}

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 { ConfirmPopupModule } from "primeng/confirmpopup";
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { ConfirmationService, MessageService } from "primeng/api";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ConfirmPopupModule,
        ToastModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ConfirmationService, MessageService]
})
  
export class AppModule {}

Выход:

Ссылка: https://primefaces.org/primeng/confirmpopup

Technical Scripter Picked AngularJS

Компонент Angular PrimeNG ConfirmPopup

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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