События ускоренного набора Angular PrimeNG

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

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

Компонент «Быстрый набор» отображает плавающую кнопку действия на странице, которая показывает несколько основных действий, которые пользователь может выполнить при нажатии. Всего для компонента SpeedDial предусмотрено 4 события.

События ускоренного набора Angular PrimeNG:

onVisibleChange: это событие принимает обратный вызов, который вызывается при изменении видимости элемента.
onClick: это событие принимает обратный вызов, который вызывается при нажатии элемента кнопки.
onShow: это событие принимает обратный вызов, который вызывается при отображении действий быстрого набора.
onHide: это событие принимает обратный вызов, который вызывается, когда действия быстрого набора скрыты.

Синтаксис:

<p-speedDial 
    [model]="actions"
    ...
    (event-name)="callback()">
</p-speedDial>

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

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

ng new appname

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

cd appname

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

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

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

Пример 1. В этом примере мы использовали события onVisibleChange и onClick быстрого набора и использовали всплывающее сообщение, чтобы уведомить пользователя о возникновении этих событий.

app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    SpeedDial Events Component
</h3>
  
<p-speedDial className="mt-8" 
             [model]="actions" 
             (onVisibleChange)="handleVisibleChange()" 
             (onClick)="handleClick()"
             type="semi-circle" 
             direction="right">
</p-speedDial>
<p-toast></p-toast>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private msgs: MessageService) { }
    actions: MenuItem[] = []
  
    ngOnInit() {
        this.actions = [
            {
                icon: "pi pi-bell",
                command: () => {
                    this.msgs.add({
                        severity: "info",
                        summary: "Notifications Opened",
                        detail: "GeeksforGeeks"
                    });
                }
            },
            {
                icon: "pi pi-bookmark",
                command: () => {
                    this.msgs.add({
                        severity: "success",
                        summary: "Page Bookmarked",
                        detail: "GeeksforGeeks"
                    });
                }
            },
            {
                icon: "pi pi-cog",
                command: () => {
                    this.msgs.add({
                        severity: "warn",
                        summary: "Settings Opened",
                        detail: "GeeksforGeeks"
                    });
                }
            },
            {
                icon: "pi pi-home",
                command: () => {
                    this.msgs.add({
                        severity: "success",
                        summary: "Home Clicked",
                        detail: "GeeksforGeeks"
                    });
                }
            },
        ];
    }
  
    handleVisibleChange() {
        this.msgs.add({
            severity: "success",
            summary: "onVisibleChange Event Fired",
            detail: "GeeksforGeeks"
        });
    }
    handleClick() {
        this.msgs.add({
            severity: "info",
            summary: "onClick Event Fired",
            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 { FormsModule } from "@angular/forms";
import { SpeedDialModule } from "primeng/speeddial";
import { ToastModule } from "primeng/toast";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        SpeedDialModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2: В этом примере показано использование событий onShow и onHide компонента SpeedDial.

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

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    SpeedDial Events Component
</h3>
  
<p-speedDial className="mt-8" 
             [model]="actions" 
             (onShow)="handleShow()" 
             (onHide)="handleHide()"
             type="semi-circle"
             direction="right">
</p-speedDial>
<p-toast></p-toast>

app.component.ts

Javascript

import { Component } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private msgs: MessageService) { }
    actions: MenuItem[] = []
  
    ngOnInit() {
        this.actions = [
            {
                icon: "pi pi-bell",
                command: () => {
                    this.msgs.add({
                        severity: "info",
                        summary: "Notifications Opened",
                        detail: "GeeksforGeeks"
                    });
                }
            },
            {
                icon: "pi pi-bookmark",
                command: () => {
                    this.msgs.add({
                        severity: "success",
                        summary: "Page Bookmarked",
                        detail: "GeeksforGeeks"
                    });
                }
            },
            {
                icon: "pi pi-cog",
                command: () => {
                    this.msgs.add({
                        severity: "warn",
                        summary: "Settings Opened",
                        detail: "GeeksforGeeks"
                    });
                }
            },
            {
                icon: "pi pi-home",
                command: () => {
                    this.msgs.add({
                        severity: "success",
                        summary: "Home Clicked",
                        detail: "GeeksforGeeks"
                    });
                }
            },
        ];
    }
  
    handleShow() {
        this.msgs.add({
            severity: "success",
            summary: "onShow Event Fired",
            detail: "Actions Shown"
        });
    }
    handleHide() {
        this.msgs.add({
            severity: "error",
            summary: "onHide Event Fired",
            detail: "Actions Hidden"
        });
    }
}

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 { FormsModule } from "@angular/forms";
import { SpeedDialModule } from "primeng/speeddial";
import { ToastModule } from "primeng/toast";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        SpeedDialModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/speeddial

Technical Scripter Picked AngularJS

События ускоренного набора Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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