Angular PrimeNG Speed Dial Events

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will be seeing Angular PrimeNG Speed Dial Events.

The Speed Dial component displays a floating action button on a page that reveals multiple primary actions the user can perform when pressed. There are a total of 4 events for the SpeedDial component.

Angular PrimeNG Speed Dial Events:

• onVisibleChange: This event accepts a callback that is invoked when the visibility of the element changes.
• onClick: This event accepts a callback that is invoked the button element is clicked.
• onShow: This event accepts a callback that is invoked when the speed dial actions are shown.
• onHide: This event accepts a callback that is invoked when the speed dial actions are hidden.

Syntax:

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

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the onVisibleChange and onClick events of the Speed Dial and used the Toast Message to notify the user when these events are fired.

• 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 { }

Output:

Example 2: This example shows the use of the onShow and onHide events of the SpeedDial component.

• 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"
             (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 { }

Output:

Reference: http://primefaces.org/primeng/speeddial