Компонент Angular PrimeNG ConfirmPopup
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