Компонент динамического диалога Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим компонент динамического диалога Angular PrimeNG.
Диалоги — это контейнеры для отображения содержимого в оверлейном окне, и их можно динамически создавать с любым компонентом в качестве содержимого с помощью DialogService .
Компонент динамического диалога Angular PrimeNG: Существуют различные компоненты, предоставляемые Angular PrimeNG в компоненте динамического диалога, которые описаны ниже:
- Свойства : Angular PrimeNG предоставляет различные параметры свойств, которые можно использовать для настройки компонента динамического диалога.
- События : Angular PrimeNG предоставляет различные события, такие как изменение размера, перетаскивание, уничтожение или закрытие компонента диалога и т. д., которые помогают создать динамический диалог.
- Стиль: этот компонент помогает сделать диалоговое окно интерактивным, реализуя различные стили, предоставляемые Angular PrimeNG.
Синтаксис: Создайте диалог следующим образом:
- Импортируйте модуль:
import {DynamicDialogModule} from "primeng/dynamicdialog";
- Реализуйте его с помощью атрибута pButton:
<button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"> </button>
- Отобразите диалог следующим образом:
this.dialogService.open(DemoTile, { header: "GFG", width: "70%", contentStyle: {"overflow": "auto"}, baseZIndex: 10000, maximizable: true });
Создание приложения Angular и установка модуля:
- Создайте приложение Angular, используя следующую команду.
ng new geeks_angular
- После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.
cd geeks_angular
- Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта : Структура проекта будет выглядеть следующим образом:
- Шаги для запуска приложения: Напишите следующую команду для запуска приложения:
ng serve --open
Пример 1. Этот пример иллюстрирует базовое использование компонента динамического диалога в Angular PrimeNG.
- app.component.html
HTML
< h1 style="color: green; text-align:center;"> GeeksforGeeks </ h1 > < h3 > Angular PrimeNG Dynamic Dialog Component </ h3 > < button type = "button" (click)="show()" pButton icon = "pi pi-info-circle" label = "Show" > </ button > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; import { MessageService } from "primeng/api" ; import { DialogService } from "primeng/dynamicdialog" ; import { DynamicDialogRef } from "primeng/dynamicdialog" ; import { TutorialDemo } from "./tutorialDemo" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , providers: [DialogService, MessageService], }) export class AppComponent { constructor( public dialogService: DialogService, public messageService: MessageService ) { } ref: DynamicDialogRef; show() { this .ref = this .dialogService.open(TutorialDemo, { header: "GeeksforGeeks" , width: "70%" , contentStyle: { "max-height" : "500px" , overflow: "auto" }, baseZIndex: 10000, }); } ngOnDestroy() { if ( this .ref) { this .ref.close(); } } } |
- 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 { TutorialDemo } from "./tutorialDemo" ; import { ButtonModule } from "primeng/button" ; import { DynamicDialogModule } from "primeng/dynamicdialog" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, DynamicDialogModule, ButtonModule, ], declarations: [AppComponent, TutorialDemo], bootstrap: [AppComponent], entryComponents: [TutorialDemo], }) export class AppModule { } |
- учебникDemo.ts
Javascript
import { Component } from "@angular/core" ; import { DynamicDialogRef } from "primeng/dynamicdialog" ; import { DynamicDialogConfig } from "primeng/dynamicdialog" ; @Component({ template: ` <h3>Welcome to GeeksforGeeks. This is dynamic dialog</h3> `, }) export class TutorialDemo { constructor( public ref: DynamicDialogRef, public config: DynamicDialogConfig ) { } ngOnInit() { } } |
Выход:
Пример 2 : этот пример иллюстрирует использование компонента динамического диалога в Angular PrimeNG, где диалог нельзя закрыть.
- app.component.html
HTML
< h1 style="color: green; text-align:center;"> GeeksforGeeks </ h1 > < h3 > Angular PrimeNG Dynamic Dialog Component </ h3 > < button type = "button" (click)="show()" pButton icon = "pi pi-info-circle" label = "Show" > </ button > |
- app.component.ts
Javascript
import { Component } from "@angular/core" ; import { MessageService } from "primeng/api" ; import { DialogService } from "primeng/dynamicdialog" ; import { DynamicDialogRef } from "primeng/dynamicdialog" ; import { TutorialDemo } from "./tutorialDemo" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , providers: [DialogService, MessageService], }) export class AppComponent { constructor( public dialogService: DialogService, public messageService: MessageService ) { } ref: DynamicDialogRef; show() { this .ref = this .dialogService.open(TutorialDemo, { header: "GeeksforGeeks" , width: "70%" , closable: false , contentStyle: { "max-height" : "500px" , overflow: "auto" }, baseZIndex: 10000, }); } ngOnDestroy() { if ( this .ref) { this .ref.close(); } } } |
- 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 { TutorialDemo } from "./tutorialDemo" ; import { ButtonModule } from "primeng/button" ; import { DynamicDialogModule } from "primeng/dynamicdialog" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, DynamicDialogModule, ButtonModule, ], declarations: [AppComponent, TutorialDemo], bootstrap: [AppComponent], entryComponents: [TutorialDemo], }) export class AppModule { } |
- учебникDemo.ts
Javascript
import { Component } from "@angular/core" ; import { DynamicDialogRef } from "primeng/dynamicdialog" ; import { DynamicDialogConfig } from "primeng/dynamicdialog" ; @Component({ template: ` <h3>Welcome to GeeksforGeeks. This is dynamic dialog</h3> `, }) export class TutorialDemo { constructor( public ref: DynamicDialogRef, public config: DynamicDialogConfig ) { } ngOnInit() { } } |
Выход:
Ссылка: https://www.primefaces.org/primeng/dynamicdialog