Event in Angular Speed dial component

27 Apr 20247 minutes to read

This section explains the Angular Speed Dial events that will be triggered when appropriate actions are performed.

clicked

The SpeedDial component triggers the clicked event with SpeedDialItemEventArgs argument when an action item is clicked. You can use this event to perform the required action.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (clicked)='clicked($event)' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public clicked(args: SpeedDialItemEventArgs) {
    //Your required action here
  }
}

created

The Speed Dial component triggers the created event when SpeedDial component rendering is completed.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (created)='created()' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public created() {
    //Your required action here
  }
}

beforeOpen

The SpeedDial component triggers the beforeOpen event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is opened.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (beforeOpen)='beforeOpen($event)' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public beforeOpen(args: SpeedDialBeforeOpenCloseEventArgs) {
    //Your required action here
  }
}

onOpen

The SpeedDial component triggers the onOpen event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is opened.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (onOpen)='onOpen($event)' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public onOpen(args: SpeedDialOpenCloseEventArgs) {
    //Your required action here
  }
}

beforeClose

The SpeedDial component triggers the beforeClose event with SpeedDialBeforeOpenCloseEventArgs argument before the SpeedDial popup is closed.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (beforeClose)='beforeClose($event)' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public beforeOpen(args: SpeedDialBeforeOpenCloseEventArgs) {
    //Your required action here
  }
}

onClose

The SpeedDial component triggers the onClose event with SpeedDialOpenCloseEventArgs argument when SpeedDial popup is closed.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (onClose)='onClose($event)' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public onClose(args: SpeedDialOpenCloseEventArgs) {
    //Your required action here
  }
}

beforeItemRender

The SpeedDial component triggers the beforeItemRender event with SpeedDialItemEventArgs argument for each SpeedDialItem once it is rendered.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render SpeedDial component. -->
        <button ejs-speeddial id="speeddial" content='Edit' (beforeItemRender)='beforeItemRender($event)' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut'},
    { text: 'Copy'},
    { text: 'Paste'}
  ];
  public beforeItemRender(args: SpeedDialItemEventArgs) {
    //Your required action here
  }
}

Below example demonstrates the clicked event of the Speed Dial component.

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



import { Component } from '@angular/core';
import { SpeedDialItemEventArgs, 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:350px;border:1px solid;"></div>
        <!-- To Render SpeedDial component with bind clicked event. -->
        <button ejs-speeddial id="speeddial" content='Edit' (clicked)='clicked($event)' target='#targetElement' [items]='items'></button>`
})

export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];
  public clicked(args: SpeedDialItemEventArgs) {
    alert(args.item.text + ' is clicked');
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));