Angular PrimeNG Speed Dial Styling

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 learn about Angular PrimeNG Speed Dial Styling.

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 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.

Syntax:

<p-speedDial [model]="items"></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:

Example 1: In this example, we will learn about the p-speeddial with circular actions in Angular PrimeNG.

• app.component.html

HTML

<div style="width:50%;">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Speed Dial Styling
    </h2>
    <div style="height: 500px;
              margin-left:30%;
              margin-top:30%"
         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

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

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

• 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",
            },
        ];
    }
}

Output:

Example 2: This is another example that describes the  Speed Dial Styling in Angular PrimeNG.

• app.component.html

HTML

<div class="speeddial-circle-demo">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Speed Dial Styling
    </h2>
    <p-speedDial [model]="gfg"
                 buttonClassName="p-button-success">
    </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 { SpeedDialModule } from 'primeng/speeddial';

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

Output:

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