Positions in Angular Speed Dial

25 Sep 20267 minutes to read

The Angular Speed Dial control can be positioned anywhere on the target using the position property. If the target is not defined, then Angular Speed Dial is positioned based on the browser viewport.

The position values of Angular Speed Dial are as follows:

  • TopLeft
  • TopCenter
  • TopRight
  • MiddleLeft
  • MiddleCenter
  • MiddleRight
  • BottomLeft
  • BottomCenter
  • BottomRight
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SpeedDialModule } from '@syncfusion/ej2-angular-buttons'



import { Component } from '@angular/core';

@Component({
imports: [
        
        SpeedDialModule// Registering EJ2 SpeedDial Module.
    ],


standalone: true,
    selector: 'app-root',
    template: `<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"><div>
    <!-- To Render SpeedDial component. -->
    <button ejs-speeddial id="speeddial" content='Add' position='BottomLeft' target='#targetElement'></button>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the style for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Opens items on hover

You can open the Angular Speed Dial action items on mouse hover by setting the opensOnHover property.

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To Render Angular Speed Dial component. -->
    <button ejs-speeddial id="speeddial" openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' target='#targetElement' [items]='items' [opensOnHover]= 'true'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];
}

Programmatically show/hide Angular Speed Dial items

You can open/close the Angular Speed Dial action items programmatically using show and hide methods.

Below example demonstrates open/close action items on button click.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SpeedDialModule } from '@syncfusion/ej2-angular-buttons'



import { Component, ViewChild, HostListener } from '@angular/core';
import { SpeedDialComponent,SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        SpeedDialModule// Registering EJ2 SpeedDial Module.
    ],


standalone: true,
    selector: 'app-root',
    template: `<div id="targetElement" style="position:relative;min-height:340px;border:1px solid;padding:10px;">
    <button id="show" (click)="show()">Show</button>
    <button id="hide" (click)="hide()">Hide</button><div>
    <!-- To Render SpeedDial component. -->
    <button ejs-speeddial #speeddial openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' target='#targetElement' [opensOnHover]= 'true' [items]='items'></button>`
})

export class AppComponent {
    @ViewChild('speeddial')
    public speeddialObj :SpeedDialComponent | any;

    public items: SpeedDialItemModel[] = [
        { iconCss: 'e-icons e-cut' },
        { iconCss: 'e-icons e-copy' },
        { iconCss: 'e-icons e-paste' }
    ];
    public show() {
        this.speeddialObj.show();
    }
    public hide() {
        this.speeddialObj.hide();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Represents the styles for button */
#hide{
  float: right;
}

Programmatically refresh the position

You can refresh the position of the Angular Speed Dial using refreshPosition method when the targetposition is changed.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SpeedDialModule } from '@syncfusion/ej2-angular-buttons'



import { Component, ViewChild, HostListener } from '@angular/core';
import { SpeedDialComponent,SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        SpeedDialModule// Registering EJ2 SpeedDial Module.
    ],


standalone: true,
    selector: 'app-root',
    template: `<div id="targetElement" style="position:relative;min-height:340px;border:1px solid;padding:10px;">
    <button id="refresh" (click)="refresh()">Refresh</button><div>
    <!-- To Render SpeedDial component. -->
    <button ejs-speeddial #speeddial openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' position='MiddleRight' target='#targetElement' [items]='items'></button>`
})

export class AppComponent {
    @ViewChild('speeddial')
    public speeddialObj:SpeedDialComponent | any;

    public items: SpeedDialItemModel[] = [
        { iconCss: 'e-icons e-cut' },
        { iconCss: 'e-icons e-copy' },
        { iconCss: 'e-icons e-paste' }
    ];
    public refresh() {
        document.getElementById("targetElement")!.style.minHeight = "300px";
        this.speeddialObj.refreshPosition();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}