Angular PrimeNG SpeedDial Component

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 know how to use the SpeedDial component in Angular PrimeNG. We will also learn about the properties, events & styling along with their syntaxes that will be used in the code.

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

Properties:

• id: It is the unique identifier of the element. It is of string data type, the default value is null.
• model: It is the MenuModel instance to define the action items. It is of object data type, the default value is null.
• visible: It specifies the visibility of the overlay. It is of boolean data type, the default value is false.
• className: It is the style class of the element. It is of string data type, the default value is null.
• style: It is the inline style of the element. It is of object data type, the default value is null.
• direction: It specifies the opening direction of actions. It is of string data type, the default value is up.
• transitionDelay: It is the transition delay step for each action item, It is of number data type, the default value is 30.
• type: It specifies the opening type of actions. It is of string data type, the default value is linear.
• radius: It is the radius for *circle types, It is of number data type, the default value is 0.
• mask: It specifies whether to show a mask element behind the speeddial It is of boolean data type, the default value is false.
• disabled: It specifies whether the component is disabled. It is of boolean data type, the default value is false.
• hideOnClickOutside: It specifies whether the actions close when clicked outside. It is of boolean data type, the default value is true.
• buttonClassName: It is the style class of the button element. It is of string data type, the default value is null.
• buttonStyle: It is the inline style of the button element. It is of object data type, the default value is null.
• buttonTemplate: It is the template of the button element. It accepts any type of data & the default value is null.
• maskClassName: It is the style class of the mask element. It is of string data type, the default value is null.
• maskStyle: It is the inline style of the mask element. It is of object data type, the default value is null.
• showIcon: It is the show icon of the button element. It is of string data type, the default value is pi pi-plus.
• hideIcon: It is the Hide icon of the button element. It is of string data type, the default value is null.
• rotateAnimation: It is used to define to rotate the showIcon when the hideIcon is not present. It is of boolean data type, the default value is true.

Events: 

• onVisibleChange: It is a callback that is fired when the visibility of the element changed.
• onClick: It is a callback that is fired when the button element is clicked.
• onShow: It is a callback that is fired when the actions are visible.
• onHide: It is a callback that is fired when the actions are hidden.

Styling:

• p-speeddial: It is the container element.
• p-speeddial-button: It is the button element of speeddial.
• p-speeddial-mask: It is the mask element of speeddial.
• p-speeddial-list: It is the list of the actions.
• p-speeddial-item: It is used to perform each action item on the list.

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:

Example 1: This is the basic example that illustrates how to use the SpeedDial Component.

app.component.html

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

app.module.ts

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

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  providers: [MessageService],
})
export class AppComponent {
  gfg: MenuItem[];

  constructor(private messageService: MessageService) {}

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

Output:

Example 2: In this example, we will know how to use the radius property in the SpeedDial Component.

app.component.html

<div class="card">
  <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>
</div>

app.module.ts

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

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  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",
      },
    ];
  }
}

Output:

Reference: https://primeng.org/speeddial