Modal in Angular Speed dial component
27 Sep 20231 minute to read
You can use the modal
property to set the Speed Dial as modal which adds an overlay to prevent the background interaction.
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. -->
<button ejs-speeddial id="speeddial" openIconCss='e-icons e-edit' [modal]='true' target='#targetElement' [items]='items'></button>`
})
export class AppComponent {
public items: SpeedDialItemModel[] = [
{ iconCss:'e-icons e-cut'},
{ iconCss:'e-icons e-copy'},
{ 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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);