События ускоренного набора Angular PrimeNG
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