Angular PrimeNG Speed Dial Type

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 discussing Angular PrimeNG Speed Dial Type.

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 4 types of Speed Dials: linear, circle, semi-circle, and quarter-circle. The type of the Speed Dial can be specified using the type property.

Angular PrimeNG Speed Dial Type Properties:

• model: It specifies an array of MenuItems to display as SpeedDial actions.
• direction: It tells the direction in which the speed dial will open. Accepted values are ‘up’, ‘down’, ‘left’, ‘right’, ‘up-left’, ‘up-right’, ‘down-left’ and ‘down-right’.
• type: It tells the opening type of SpeedDial actions. Valid values are ‘linear’, ‘circle’, semi-circle’, and ‘quarter-circle’.
• radius: It defines the radius of the SpeedDial for the ‘circle’, semi-circle’, and ‘quarter-circle’ types.

Syntax:

<p-speedDial 
    [model]="actions" 
    type="..."
    radius="..."
    ... 
    direction="...">
</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: The below example illustrates the linear and circle types of the Speed Dial.

• app.component.html:

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>

<h3>
    Angular PrimeNG Form
    SpeedDial Types Component
</h3>

<div class="grid">
    <p-speedDial class="col-6"
        [model]="actions" type="linear">
    </p-speedDial>
    <p-speedDial class="col-6 mt-8"
        [model]="actions" type="circle">
    </p-speedDial>
</div>
<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',
    styleUrls: ['./app.component.css'],
    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-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'
                    });
                }
            },
        ];
    }
}

• 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 semi-circle and quarter-circle types of the Speed Dial.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    SpeedDial Types Component
</h3>

<div class="grid" style="padding: 100px;">
    <p-speedDial
        class="col-6"
        [model]="actions"
        type="semi-circle"
        direction="up">
    </p-speedDial>
    <p-speedDial
        class="col-6 mt-8"
        [model]="actions"
        type="quarter-circle"
        direction="down-right"
        [radius]="200">
    </p-speedDial>
</div>

<div class="grid" style="padding: 100px;">
    <p-speedDial
        class="col-6"
        [model]="actions"
        type="semi-circle"
        direction="down">
    </p-speedDial>
    <p-speedDial
        class="col-6 mt-8"
        [model]="actions"
        type="quarter-circle"
        direction="up-left"
        [radius]="150">
    </p-speedDial>

</div>
<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',
    styleUrls: ['./app.component.css'],
    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-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'
                    });
                }
            },
        ];
    }
}

• app.module.ts:

HTML

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