Компонент динамического диалога Angular PrimeNG

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

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

Technical Scripter Picked AngularJS

Компонент динамического диалога Angular PrimeNG

HTML

Javascript

Javascript

Javascript

HTML

Javascript

Javascript

Javascript

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