Positions in Angular Floating action button component

20 Dec 20225 minutes to read

The floating action button can be positioned anywhere on the target using the position property. If the target is not defined, then FAB is positioned based on the browser viewport.

The position values of Floating Action Button are as follows:

  • TopLeft
  • TopCenter
  • TopRight
  • MiddleLeft
  • MiddleCenter
  • MiddleRight
  • BottomLeft
  • BottomCenter
  • BottomRight
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To Render Floating Action Button in BottomLeft position. -->
                <button ejs-fab id='fab' content='Add' position='BottomLeft'></button>`
})

export class AppComponent { }

Below example demonstrates different supported positions of FAB.

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

@Component({
    selector: 'app-root',
    template: `<div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
        <!-- To Render Floating Action Button in TopLeft position. -->
        <button ejs-fab id="fab1" iconCss='fab-icons fab-icon-people' position='TopLeft'
            target='#target'></button>
        <!-- To Render Floating Action Button in TopCenter position. -->
        <button ejs-fab id="fab2" iconCss='fab-icons fab-icon-people' position='TopCenter'
            target='#target'></button>
        <!-- To Render Floating Action Button in TopRight position. -->
        <button ejs-fab id="fab3" iconCss='fab-icons fab-icon-people' position='TopRight'
            target='#target'></button>
        <!-- To Render Floating Action Button in MiddleLeft position. -->
        <button ejs-fab id="fab4" iconCss='fab-icons fab-icon-people'position='MiddleLeft'
            target='#target'></button>
        <!-- To Render Floating Action Button in MiddleCenter position. -->
        <button ejs-fab id="fab5" iconCss='fab-icons fab-icon-people' position='MiddleCenter'
            target='#target'></button>
        <!-- To Render Floating Action Button in MiddleRight position. -->
        <button ejs-fab id="fab6" iconCss='fab-icons fab-icon-people' position='MiddleRight'
            target='#target'></button>
        <!-- To Render Floating Action Button in BottomLeft position. -->
        <button ejs-fab id="fab7" iconCss='fab-icons fab-icon-people' position='BottomLeft'
            target='#target'></button>
        <!-- To Render Floating Action Button in BottomCenter position. -->
        <button ejs-fab id="fab8" iconCss='fab-icons fab-icon-people' position='BottomCenter'
            target='#target'></button>
        <!-- To Render Floating Action Button in BottomRight position. -->
        <button ejs-fab id="fab9" iconCss='fab-icons fab-icon-people' position='BottomRight'
            target='#target'></button>`
})

export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FabModule } from '@syncfusion/ej2-angular-buttons'

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FabModule
    ],
    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);

Custom position

You can define the custom position of the Floating Action Button by override the top, left, right, and bottom CSS properties using cssClass. For detailed information, refer index.css file below.

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 Floating Action Button -->
                <button ejs-fab id='fab' iconCss= 'e-icons e-edit' cssClass= 'custom-position' target='#targetElement'></button>`
})

export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FabModule } from '@syncfusion/ej2-angular-buttons'

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FabModule
    ],
    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);