Positions in Angular Speed dial component
27 Sep 20238 minutes to read
The Speed dial control can be positioned anywhere on the target
using the position
property. If the target
is not defined, then Speed Dial is positioned based on the browser viewport.
The position values of Speed Dial are as follows:
- TopLeft
- TopCenter
- TopRight
- MiddleLeft
- MiddleCenter
- MiddleRight
- BottomLeft
- BottomCenter
- BottomRight
import { Component } from '@angular/core';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SpeedDialModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SpeedDialModule// Registering EJ2 SpeedDial Module.
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/* 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 Speed Dial action items on mouse hover by setting the opensOnHover
property.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render SpeedDial 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 Speed Dial items
You can open/close the Speed Dial action items programmatically using show
and hide
methods.
Below example demonstrates open/close action items on button click.
import { Component, ViewChild, HostListener } from '@angular/core';
import { SpeedDialComponent,SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SpeedDialModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SpeedDialModule// Registering EJ2 SpeedDial Module.
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/* 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 Speed Dial using refreshPosition
method when the target
position is changed.
import { Component, ViewChild, HostListener } from '@angular/core';
import { SpeedDialComponent,SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';
@Component({
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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SpeedDialModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SpeedDialModule// Registering EJ2 SpeedDial Module.
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}