Template in Angular Speed dial component

27 Apr 20245 minutes to read

This section explains available templates in SpeedDial component and its usage.

Item template

You can use the itemTemplate property to set a template content for the SpeedDial items. The template content is defined as a child content of itemTemplate tag directive.

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



import { Component } from '@angular/core';
import { 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 icon and text -->
    <button ejs-speeddial id="speeddial" content='Edit' openIconCss='e-icons e-edit' target='#targetElement' [items]=items [itemTemplate]="itemTemplate">
    <ng-template #itemTemplate let-items="">
        <div class="itemlist">
            <span class="icon " style="padding:3px"></span>
            <span class="text"></span>
        </div>
    </ng-template></button>`
})

export class AppComponent {
     public items: SpeedDialItemModel[] = [
    { text:'Cut', iconCss:'e-icons e-cut'},
    { text:'Copy', iconCss:'e-icons e-copy'},
    { text:'Paste', iconCss:'e-icons e-paste'}
  ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
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 speeddial list items */
.itemlist .text {
  padding: 0 5px;
}

.e-speeddial-li .itemlist {
  display: inherit;
  width: 100%;
  border: 1px solid transparent;
  align-items: center;
  padding: 5px;
  border-radius: 500px;
  background-color: rgba(104, 99, 104, 0.1);
  box-shadow: 0 0 4px grey;
}

.e-speeddial-li .itemlist:hover {
  background-color: rgb(224, 224, 224);
}

You can use the popupTemplate property to set a template content for popup of SpeedDial component. The template content is defined as a child content of popupTemplate tag directive.

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 with icon and text -->
    <button ejs-speeddial id="speeddial" content='Edit' openIconCss='e-icons e-edit' target='#targetElement' [popupTemplate]="popupTemplate">
    <ng-template #popupTemplate>
        <div>
            <div class="speeddial-form">
                <p>Here you can customize your code.</p>
            </div>
        </div>
    </ng-template>
    </button>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
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 speeddial-form */
.speeddial-form {
  width: 200px;
  height: 80px;
  text-align: center;
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
  background: #f5f5f5;
  padding: 15px;
}