Angular PrimeNG Speed Dial

Angular PrimeNG is an open-source framework with a rich set 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 see how to use the SpeedDial Component in Angular PrimeNG.

The SpeedDial component is used to display many primary actions that can be done using the floating button action while pressing the button.

Angular PrimeNG Speed Dial Components:

• Dial Type: This component defines the type of Dial used for the Speed Dial. There are 4 types, i.e,  linear, circle, semi-circle, & quarter-circle.
• Dial Linear: This component defines the direction of the dial as linear.
• Dial Circle, Semi-Circle, and Quarter-Circle: This component is used to define the direction of dial when pressing the floating action button, i.e., the dial will open in a Circular, Semi-Circular, and Quarter-Circular form.
• Dial Tooltip: This component displays the tooltip when hovering over the primary actions that can be performed on a page.
• Dial Transition Duration, Icon, and No Rotate Animation: This component defines the dial that will open with a particular duration with a transition effect having the icons, to perform the primary actions on a page.
• Dial Mask: This component is used to add the masking effect on the dial.
• Dial Direction: This component is used to specify the opening direction of actions of the Speed Dial.
• Dial Properties: This component is used to enhance the functionality of the Speed Dial by passing any property to the main container element.
• Dial Templates: This component specifies the different elements & tags used for the Speed Dial
• Dial Events: This component is used to add functionality to the Speed Dial, in order to make the Speed Dial interactive.
• Dial Styling: This component is used to enhance the Styling of the Speed Dial by implementing the various list of structural style classes.

Creating Angular application & module installation:

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: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

• Steps to run the application: Run the below command to see the output:

npm start

Example 1: Below is the basic example illustrating the use of the Angular PrimeNG SpeedDial Component.

• app.component.html:

HTML

<h2>GeeksforGeeks</h2>
<h5>PrimeNG SpeedDial Component</h5>
<p-speedDial [model]="gfg"></p-speedDial>

• app.component.ts:

Javascript

import { Component, OnInit } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService],
})

export class AppComponent {
    gfg: MenuItem[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.gfg = [
            {
                icon: "pi pi-check",
            },
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ProgressSpinnerModule }
    from "primeng/progressspinner";
import { RippleModule } from "primeng/ripple";
import { SpeedDialModule } from "primeng/speeddial";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ProgressSpinnerModule,
        SpeedDialModule,
        RippleModule,
        RouterModule.forRoot([
            { path: "", component: AppComponent }
        ]),
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: Below is another example that illustrates the use of the SpeedDial Component in Angular PrimeNG.

• app.component.html:

HTML

<h2 style="color:green">
  GeeksforGeeks
</h2>
<h4>PrimeNG Speed Dial</h4>

<div style="height: 500px;
            position: relative"
     class="speeddial-circle-demo">
    <p-speedDial [model]="gfg"
                 radius="80"
                 [transitionDelay]="80"
                 type="circle"
                 buttonClassName="p-button-warning">
    </p-speedDial>
</div>

• app.component.ts:

Javascript

import { Component, OnInit } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService],
})

export class AppComponent {
    gfg: MenuItem[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.gfg = [
            {
                icon: "pi pi-pencil",
            },
            {
                icon: "pi pi-refresh",
            },
            {
                icon: "pi pi-trash",
            },
            {
                icon: "pi pi-upload",
            },
            {
                icon: "pi pi-external-link",
            },
        ];
    }
}

• 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 { ProgressSpinnerModule }
    from "primeng/progressspinner";
import { RippleModule } from "primeng/ripple";
import { SpeedDialModule } from "primeng/speeddial";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ProgressSpinnerModule,
        SpeedDialModule,
        RippleModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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