Events in Angular Floating action button component

27 Apr 20242 minutes to read

This section explains the available events in Floating Action Button component.

created

Event triggers after the creation of Floating Action Button.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render Floating Action Button. -->
                <button ejs-fab id='fab' iconCss= 'e-icons e-edit' content= 'Edit' (created)="onCreate()"></button>`
})

export class AppComponent {

    onCreate() {
        //Your required action here
  };
 }

onclick

Event triggers when the Floating Action Button is clicked.

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

@Component({
    selector: 'app-root',
    template: `<!-- To Render Floating Action Button. -->
                <button ejs-fab id='fab' iconCss= 'e-icons e-edit' content= 'Edit' (click)="onclick()"></button>`
})

export class AppComponent {

    onclick() {
        //Your required action here
  };
 }

Below example demonstrates the click event of the Floating Action Button.

app.component.ts

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



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

@Component({
imports: [
        
        FabModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div id="targetElement" style="position:relative;min-height:350px;border:1px solid;">
               </div>
               <!-- To Render Floating Action Button. -->
                <button ejs-fab id='fab' iconCss= 'e-icons e-edit' content= 'Edit' (click) ="onclick()" target= '#targetElement'></button>`
})

export class AppComponent {

    onclick() {
        alert("Edit is clicked!");
  };
 }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));