Template in Angular Speed dial component

1 Dec 20224 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 { Component } from '@angular/core';
import { SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
    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 { 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';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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 { 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 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 { 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';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);