Angular PrimeNG Speed Dial Properties

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 Properties 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. There are various properties provided by the Angular PrimeNG, that can be utilized to enhance the functionality, along with the styling of the Speed Dial, which are described below.

Angular PrimeNG Speed Dial 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, and 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, and the default value is 0.
• mask: It specifies whether to show a mask element behind the speed dial It is of boolean data type, and 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 a boolean data type, and 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 a boolean data type, and the default value is true.

Syntax:

<p-speedDial [model]="..." 
             direction="..." 
             [transitionDelay]="..." 
             showIcon="..." 
             hideIcon="...">
</p-speedDial>

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: To run the above file run the below command:

ng serve --save

Example 1: This basic example illustrates how to use the Angular PrimeNG Speed Dial Properties using linear and semi-circle type.

• app.component.html:

HTML

<div style="text-align: center">
   <h1 style="color: green">
         GeeksforGeeks
   </h1>
   <h5>Angular PrimeNG SpeedDial Properties</h5>

   <div style="height: 300px;
               position: relative;"
        class="speeddial-linear-demo">
      <p-speedDial [model]="gfg"
                   direction="down">
      </p-speedDial>
   </div>

   <div style="position: relative;"
        class="speeddial-circle-demo">
      <p-speedDial [model]="gfg"
                   radius="70"
                   direction="down"
                   type="semi-circle">
      </p-speedDial>
   </div>
</div>

• 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.scss'],
    providers: [MessageService]
})

export class AppComponent {
    gfg: MenuItem[];

    ngOnInit() {
        this.gfg = [
            {
                icon: 'pi pi-facebook',
            },
            {
                icon: 'pi pi-instagram',
            },
            {
                icon: 'pi pi-twitter',
            },
            {
                icon: 'pi pi-linkedin',
            }
        ];
    }
}

• 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]01
})

export class AppModule { }

Output:

Example 2: Below is another example illustrating how to use the Angular PrimeNG Speed Dial Properties using the tooltip and transition-delay properties.

• app.component.html:

HTML

<div style="text-align: center">
   <h1 style="color: green">
      GeeksforGeeks
   </h1>
   <h5>Angular PrimeNG SpeedDial Properties</h5>

   <div style="height: 100px;
               position: relative;"
         class="speeddial-delay-demo">
      <p-speedDial [model]="gfg"
                   direction="down"
                   [transitionDelay]="100"
                   showIcon="pi pi-check"
                   hideIcon="pi pi-times">
      </p-speedDial>
   </div>

   <div style="position: relative;"
        class="speeddial-circle-demo">
      <p-speedDial [model]="gfg"
                   radius="70"
                   direction="down"
                   type="circle">
      </p-speedDial>
   </div>
</div>

• 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.scss'],
    providers: [MessageService]
})

export class AppComponent {
    gfg: MenuItem[];

    ngOnInit() {
        this.gfg = [
            {
                icon: 'pi pi-facebook',
                tooltipOptions: {
                    tooltipLabel: "Facebook"
                },
            },
            {
                icon: 'pi pi-instagram',
                tooltipOptions: {
                    tooltipLabel: "Instagram"
                },
            },
            {
                icon: 'pi pi-twitter',
                tooltipOptions: {
                    tooltipLabel: "Twitter"
                },
            },
            {
                icon: 'pi pi-linkedin',
                tooltipOptions: {
                    tooltipLabel: "LinkedIn"
                },
            }
        ];
    }
}

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

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

export class AppModule { }

Output:

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