Syncfusion Angular Buttons

Implementing Syncfusion Angular Buttons

Button

The Syncfusion Angular Button is a graphical user interface element rendered via the ejs-button directive. It triggers an action on click and supports text, icons, or both — with extensive styling, accessibility, and behavioral options.

Navigation Guide

Getting Started

📄 Read: references/button-getting-started.md

• Prerequisites and package dependencies
• Setting up a new Angular application (standalone architecture)
• Installing @syncfusion/ej2-angular-buttons via ng add
• CSS/theme imports for Material and other themes
• Rendering the first ejs-button directive
• Changing button type using cssClass

Types and Styles

📄 Read: references/button-types-and-styles.md

• Predefined color styles (e-primary, e-success, e-info, e-warning, e-danger, e-link)
• Basic HTML types: submit and reset buttons
• Flat, outline, round, and toggle button types
• Toggle button active state via e-active class
• Icon buttons using iconCss and iconPosition
• SVG icon support
• Button sizes: small (e-small) vs normal

How-To Patterns

📄 Read: references/button-how-to.md

• Create a block (full-width) button using e-block
• Create a rounded-corner button with custom CSS
• Add a navigation link inside a button
• Customize button appearance with a custom CSS class
• Style native <input> and <a> elements as buttons
• Set disabled state with [disabled]="true"
• Enable right-to-left (RTL) support with [enableRtl]="true"
• Add a tooltip on hover using the created event
• Implement a repeat button using mouse and touch events

Accessibility

📄 Read: references/button-accessibility.md

• WCAG 2.2 and Section 508 compliance details
• WAI-ARIA attributes (aria-label for icon-only buttons)
• Keyboard interaction: Space key behavior
• Screen reader support and automated testing tools

EJ1 Migration

📄 Read: references/button-ej1-migration.md

• Property mapping from EJ1 to EJ2 (e.g., text → content, prefixIcon → iconCss)
• Method and event equivalents
• Properties not available in EJ2

API Reference

📄 Read: references/button-api.md

• All properties with types, defaults, and code samples
• Methods: click(), focusIn(), destroy()
• Events: created

Quick Start

ng add @syncfusion/ej2-angular-buttons

// src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below)
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button>Default</button>
      <button ejs-button cssClass="e-primary">Primary</button>
      <button ejs-button cssClass="e-success">Success</button>
    </div>
  `
})
export class AppComponent { }

Angular 20+ note: The CLI generates src/app/app.ts, app.html, and app.css (no .component. suffix). In Angular 19 and below, the file is app.component.ts.

Common Patterns

Color-Styled Buttons

<button ejs-button cssClass="e-primary">Primary</button>
<button ejs-button cssClass="e-success">Success</button>
<button ejs-button cssClass="e-warning">Warning</button>
<button ejs-button cssClass="e-danger">Danger</button>

Icon Button

<button ejs-button iconCss="e-icons e-save">Save</button>
<button ejs-button iconCss="e-icons e-delete" iconPosition="Right">Delete</button>

Toggle Button

// In component class
@ViewChild('togglebtn') togglebtn: ButtonComponent | any;
@HostListener('click', ['togglebtn'])
btnClick() {
  if (this.togglebtn.element.classList.contains('e-active')) {
    this.togglebtn.content = 'Pause';
  } else {
    this.togglebtn.content = 'Play';
  }
}

<button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true" content="Play"></button>

Disabled Button

<button ejs-button [disabled]="true">Disabled</button>

Block (Full-Width) Button

<button ejs-button cssClass="e-block e-primary">Full Width</button>

ButtonGroup

The Syncfusion Angular ButtonGroup is a CSS-only component that groups multiple buttons together into a single cohesive UI element. It supports horizontal and vertical layouts, radio/checkbox selection behaviors, outline and color styles, icon buttons, nested split/dropdown buttons, RTL, form integration, and full accessibility compliance.

Package: @syncfusion/ej2-angular-buttons Container class: .e-btn-group Button directive: ejs-button (from ButtonModule)

Navigation Guide

Getting Started

📄 Read: references/buttongroup-getting-started.md

• Installing @syncfusion/ej2-angular-buttons via ng add
• ButtonModule import in standalone component's imports[]
• CSS theme imports for material theme
• Basic horizontal ButtonGroup with ejs-button
• Vertical orientation using e-vertical class

Types and Styles

📄 Read: references/buttongroup-types-and-styles.md

• Outline ButtonGroup (e-outline on container + each button)
• Color styles: e-primary, e-success, e-info, e-warning, e-danger via cssClass
• Rounded corners with e-round-corner
• Icon buttons using iconCss property

Selection (Radio & Checkbox)

📄 Read: references/buttongroup-selection.md

• Single selection (radio type) with <input type="radio"> + <label class="e-btn">
• Multiple selection (checkbox type) with <input type="checkbox"> + <label class="e-btn">
• Show pre-selected state on initial render using checked attribute
• Nesting DropDownButton or SplitButton inside a group

How-To Recipes

📄 Read: references/buttongroup-how-to.md

• Disable individual button or entire group
• Enable ripple effect
• RTL (right-to-left) layout
• Form submission with radio/checkbox button groups
• Programmatic initialization using createButtonGroup utility

Accessibility

📄 Read: references/buttongroup-accessibility.md

• WCAG 2.2 / Section 508 compliance
• Keyboard navigation shortcuts (normal, checkbox, radio behaviors)
• Screen reader guidance

Quick Start

1. Install the package:

ng add @syncfusion/ej2-angular-buttons

2. Add CSS to styles.css:

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

3. Create a basic ButtonGroup:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class='e-btn-group'>
      <button ejs-button>HTML</button>
      <button ejs-button>CSS</button>
      <button ejs-button>JavaScript</button>
    </div>`
})
export class AppComponent { }

Common Patterns

Vertical ButtonGroup

Add e-vertical to the container — buttons stack top-to-bottom:

<div class='e-btn-group e-vertical'>
  <button ejs-button>HTML</button>
  <button ejs-button>CSS</button>
  <button ejs-button>JavaScript</button>
</div>

e-vertical does not support nesting SplitButton.

Outline Style

Add e-outline to container and cssClass='e-outline' to each button:

<div class='e-btn-group e-outline'>
  <button ejs-button cssClass='e-outline'>HTML</button>
  <button ejs-button cssClass='e-outline'>CSS</button>
  <button ejs-button cssClass='e-outline'>JavaScript</button>
</div>

Radio Selection (Single Select)

<div class='e-btn-group'>
  <input type="radio" id="radioleft" name="align" value="left"/>
  <label class="e-btn" for="radioleft">Left</label>
  <input type="radio" id="radiomiddle" name="align" value="middle"/>
  <label class="e-btn" for="radiomiddle">Center</label>
  <input type="radio" id="radioright" name="align" value="right"/>
  <label class="e-btn" for="radioright">Right</label>
</div>

Checkbox Selection (Multi Select)

<div class='e-btn-group'>
  <input type="checkbox" id="check_bold" name="font" value="bold"/>
  <label class="e-btn" for="check_bold">Bold</label>
  <input type="checkbox" id="check_italic" name="font" value="italic"/>
  <label class="e-btn" for="check_italic">Italic</label>
  <input type="checkbox" id="check_underline" name="font" value="underline"/>
  <label class="e-btn" for="check_underline">Underline</label>
</div>

Key Decision Guide

DropDownButton

The Syncfusion Angular DropDownButton is a graphical UI element rendered via the ejs-dropdownbutton directive. It displays a button that opens a popup menu of action items when clicked. It supports icons, custom templates, animations, navigation links, accessibility, RTL, and dynamic item management.

Navigation Guide

Getting Started

📄 Read: references/dropdownbutton-getting-started.md

• Prerequisites and package dependencies
• Setting up a new Angular application (standalone architecture)
• Installing @syncfusion/ej2-angular-splitbuttons via ng add
• CSS/theme imports for Material and other themes
• Rendering the first ejs-dropdownbutton directive
• Defining ItemModel[] action items

Icons and Appearance

📄 Read: references/dropdownbutton-icons-and-appearance.md

• Button icon with iconCss and iconPosition (Left, Top)
• Vertical button layout using e-vertical cssClass
• Icon-only button with e-caret-hide cssClass
• Sprite image as button icon
• Hiding the dropdown arrow
• Rounded corner styling
• Customizing icon size and button width
• Changing the caret/dropdown arrow icon dynamically

Popup Items and Templating

📄 Read: references/dropdownbutton-popup-items.md

• Icons on popup action items via iconCss
• Navigation links via url property on items
• Separator items using separator: true
• Item-level templating with beforeItemRender event
• Full popup templating using target property
• itemTemplate property for custom item rendering
• Grouping items with ListView as popup target
• Underlining a character in item text

Events and Interactivity

📄 Read: references/dropdownbutton-events.md

• select — handle item selection
• open / close — popup open/close callbacks
• beforeOpen / beforeClose — cancel or customize before open/close
• beforeItemRender — customize each item during render
• created — component initialized callback
• Opening a dialog on popup item click
• Changing popup open position via open event

Animation

📄 Read: references/dropdownbutton-animation.md

• animationSettings property overview
• Supported effects: None, SlideDown, ZoomIn, FadeIn
• Configuring duration and easing

Configuration and Behavior

📄 Read: references/dropdownbutton-configuration.md

• Disabling the DropDownButton via disabled
• RTL support via enableRtl
• popupWidth for consistent popup sizing
• createPopupOnClick for deferred popup creation
• enableHtmlSanitizer for safe HTML rendering
• closeActionEvents to customize popup close trigger
• enablePersistence for state persistence
• Dynamic item management: addItems, removeItems, toggle

API Reference

📄 Read: references/dropdownbutton-api.md

• All properties with types, defaults, and descriptions
• All events with argument types
• All methods with parameters and return types
• ItemModel interface fields
• Supporting interfaces: BeforeOpenCloseMenuEventArgs, MenuEventArgs, OpenCloseMenuEventArgs

Accessibility

📄 Read: references/dropdownbutton-accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes and roles
• Keyboard navigation shortcuts
• Screen reader support
• RTL support

Quick Start

import { Component } from '@angular/core';
import { DropDownButtonModule, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [DropDownButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-dropdownbutton [items]="items" content="Clipboard" iconCss="e-icons e-copy" (select)="onSelect($event)"></button>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  onSelect(args: any) {
    console.log('Selected:', args.item.text);
  }
}

Common Patterns

Popup with separator groups

public items: ItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  { text: 'Font' },
  { text: 'Paragraph' }
];

Icon-only button (no text, no caret)

<button ejs-dropdownbutton [items]="items" iconCss="e-icons e-menu" cssClass="e-caret-hide"></button>

Vertical layout with top icon

<button ejs-dropdownbutton [items]="items" content="Paste" iconCss="e-icons e-paste" iconPosition="Top" cssClass="e-vertical"></button>

RTL layout

<button ejs-dropdownbutton [items]="items" content="Message" enableRtl="true"></button>

Custom popup width

<button ejs-dropdownbutton [items]="items" [popupWidth]="'250px'" content="Options"></button>

Navigation items

public items: ItemModel[] = [
  { text: 'Home',   url: '/home' },
  { text: 'About',  url: '/about' }
];

Floating Action Button

The Syncfusion Angular Floating Action Button (ejs-fab) is a circular button that floats above the UI and represents the primary action in an application. It supports flexible positioning, icon + text content, predefined styles, events, full accessibility compliance, and CSS customization.

Package: @syncfusion/ej2-angular-buttons Module: FabModule Selector: ejs-fab

Navigation Guide

Getting Started

📄 Read: references/floating-action-button-getting-started.md

• Installing @syncfusion/ej2-angular-buttons via ng add
• CSS theme imports for Material theme
• FabModule import in standalone component
• Minimal ejs-fab setup
• Using target to scope FAB to a container
• Handling the (click) event

Icons and Content

📄 Read: references/floating-action-button-icons.md

• iconCss property for icon-only FAB
• content property for text label
• iconPosition for Left vs Right icon placement
• Combined icon + text FAB examples

Positions

📄 Read: references/floating-action-button-positions.md

• position property with all nine predefined values (TopLeft → BottomRight)
• target property to scope FAB to a container element
• Custom CSS position using cssClass
• Calling refreshPosition() after target resize

Styles and Appearance

📄 Read: references/floating-action-button-styles.md

• Predefined cssClass values: e-primary, e-outline, e-info, e-success, e-warning, e-danger
• CSS class override reference table (.e-fab.e-btn, hover, focus, active, icon)
• Show text on hover with CSS transition
• Outline color customization

Events

📄 Read: references/floating-action-button-events.md

• (created) event for post-render initialization
• (click) event for click handling

Accessibility

📄 Read: references/floating-action-button-accessibility.md

• WCAG 2.2 / Section 508 compliance summary
• WAI-ARIA attributes (aria-label)
• Keyboard interaction (Space key)
• RTL support via enableRtl
• Screen reader guidance

API Reference

📄 Read: references/floating-action-button-api.md

• All properties: content, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, iconCss, iconPosition, isPrimary, isToggle, position, target, visible
• Methods: click(), destroy(), focusIn(), getPersistData(), refreshPosition()
• Events: created, click

Quick Start

ng add @syncfusion/ej2-angular-buttons

/* styles.css – added automatically by ng add */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';

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>
    <button ejs-fab id="fab" content="Add" target="#targetElement"></button>
  `
})
export class AppComponent { }

Common Patterns

Icon-Only FAB (most common)

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" target="#target"></button>
  `
})
export class AppComponent { }

FAB with Click Handler

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" content="Edit"
      (click)="onFabClick()" target="#target"></button>
  `
})
export class AppComponent {
  onFabClick(): void {
    alert('FAB clicked!');
  }
}

FAB with Custom Style

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target"></button>
  `
})
export class AppComponent { }

Key Props at a Glance

Speed Dial

The Syncfusion Angular Speed Dial component renders a floating action button that expands to reveal a set of action items. It is based on the ejs-speeddial directive and supports linear and radial display modes, flexible positioning, animations, modal overlay, custom templates, and full accessibility compliance.

Navigation Guide

Getting Started

📄 Read: references/speeddial-getting-started.md

• Prerequisites and package dependencies
• Installing @syncfusion/ej2-angular-buttons via ng add
• CSS/theme imports
• Rendering the first ejs-speeddial directive with items
• Standalone vs NgModule architecture

Items and Animation

📄 Read: references/speeddial-items-and-animation.md

• Configuring action items (SpeedDialItemModel: text, iconCss, id, title, disabled)
• Icon-only, text-only, and icon-with-text item variants
• Disabling individual items
• Configuring open/close animation (animation, SpeedDialAnimationSettingsModel)
• Supported animation effects (Fade, Zoom, etc.)

Display Modes

📄 Read: references/speeddial-display-modes.md

• Linear mode: list-like display with direction (Up, Down, Left, Right, Auto)
• Radial mode: circular pattern using mode='Radial'
• Configuring radial settings (radialSettings: direction, startAngle, endAngle, offset)
• Choosing mode based on use case

Position and Visibility

📄 Read: references/speeddial-position-and-visibility.md

• All nine position values (TopLeft → BottomRight)
• Using target to anchor Speed Dial within a container
• Opening items on hover via opensOnHover
• Programmatic show/hide using show() and hide() methods
• Refreshing button position using refreshPosition()
• Controlling visibility with visible property

Styles and Appearance

📄 Read: references/styles-and-appearance.md

• Button icon customization: openIconCss, closeIconCss, content
• Predefined CSS styles via cssClass (e-primary, e-success, e-warning, etc.)
• Enabling/disabling the component with disabled
• Controlling visibility with visible
• Hover open behavior with opensOnHover
• Item tooltip via title field
• Custom CSS class usage

Templates

📄 Read: references/speeddial-templates.md

• Item template using itemTemplate and <ng-template #itemTemplate>
• Popup template using popupTemplate and <ng-template #popupTemplate>
• Template context and binding

Events

📄 Read: references/speeddial-events.md

• clicked — action item clicked (SpeedDialItemEventArgs)
• created — component rendered
• beforeOpen / onOpen — popup opening lifecycle
• beforeClose / onClose — popup closing lifecycle
• beforeItemRender — each item rendered

Accessibility

📄 Read: references/speeddial-accessibility.md

• WCAG 2.2 and Section 508 compliance
• WAI-ARIA attributes (role, aria-label, aria-expanded, etc.)
• Keyboard shortcuts (Enter, Arrow keys, Esc, Home, End)
• Screen reader and RTL support

API Reference

📄 Read: references/speeddial-api.md

• All component properties with types and defaults
• All methods: show(), hide(), refreshPosition()
• All events with their argument types
• SpeedDialItemModel fields
• SpeedDialAnimationSettingsModel fields
• RadialSettingsModel fields

Quick Start

import { Component } from '@angular/core';
import { SpeedDialModule, SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [SpeedDialModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative; min-height:350px; border:1px solid;"></div>
    <button ejs-speeddial
      id="speeddial"
      content="Edit"
      openIconCss="e-icons e-edit"
      closeIconCss="e-icons e-close"
      target="#target"
      [items]="items"
      (clicked)="onItemClicked($event)">
    </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' }
  ];

  public onItemClicked(args: any) {
    console.log(args.item.text + ' clicked');
  }
}

Common Patterns

Icon-only items with tooltips

public items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut',   title: 'Cut' },
  { iconCss: 'e-icons e-copy',  title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];

Radial menu

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  closeIconCss="e-icons e-close"
  mode="Radial"
  position="MiddleCenter"
  target="#target"
  [items]="items"
  [radialSettings]="radialSettings">
</button>

public radialSettings: RadialSettingsModel = {
  direction: 'AntiClockwise',
  startAngle: 180,
  endAngle: 360,
  offset: '80px'
};

Modal overlay

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  [modal]="true"
  target="#target"
  [items]="items">
</button>

Programmatic show/hide

@ViewChild('speeddial') speeddialObj: SpeedDialComponent;

show() { this.speeddialObj.show(); }
hide() { this.speeddialObj.hide(); }

ProgressButton

The Syncfusion Angular ProgressButton (ejs-progressbutton) extends a standard button with built-in progress indication — a spinner and/or background filler UI — ideal for async operations, form submissions, or any action with a perceivable wait time.

Navigation Guide

Quick Start

# Install the package
ng add @syncfusion/ej2-angular-splitbuttons

// src/app/app.ts (Angular 20+) or app.component.ts (Angular 19 and below)
import { Component } from '@angular/core';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [ProgressButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-progressbutton content="Upload" [enableProgress]="true"
            [duration]="3000">
    </button>
  `
})
export class AppComponent {}

/* styles.css — or import individually */
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-buttons/styles/material.css';
@import '@syncfusion/ej2-popups/styles/material.css';
@import '@syncfusion/ej2-splitbuttons/styles/material.css';

Common Patterns

Spinner on the right

template: `
  <button ejs-progressbutton content="Submit"
          [spinSettings]="{ position: 'Right' }">
  </button>
`

Background filler + animation

template: `
  <button ejs-progressbutton content="Download" [enableProgress]="true"
          [animationSettings]="{ effect: 'SlideLeft' }">
  </button>
`

Handle lifecycle events

template: `
  <button ejs-progressbutton content="Send"
          (begin)="onBegin($event)"
          (progress)="onProgress($event)"
          (end)="onEnd($event)"
          (fail)="onFail($event)">
  </button>
`
// Component class
onBegin(args: any)    { console.log('Started:', args.percent); }
onProgress(args: any) { console.log('Progress:', args.percent); }
onEnd(args: any)      { console.log('Completed'); }
onFail(args: any)     { console.log('Failed'); }

Programmatic control

@ViewChild('progressBtn') progressBtn!: ProgressButtonComponent;

startProgress()    { this.progressBtn.start(0); }
stopProgress()     { this.progressBtn.stop(); }
completeProgress() { this.progressBtn.progressComplete(); }

Switch

A lightweight toggle component (ejs-switch) for on/off binary input. Supports checked state, labels, disabled, sizing, two-way binding, form integration, custom styling, events, and full WCAG 2.2 accessibility.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation with ng add @syncfusion/ej2-angular-buttons
• Standalone component and NgModule setup
• Basic Switch with checked state
• CSS / SCSS theme imports
• Setting onLabel and offLabel text

Switch Features

📄 Read: references/switch-features.md

• Disabled state (disabled property)
• Size variants — default and small (cssClass: 'e-small')
• RTL support (enableRtl)
• Two-way data binding with ngModel
• Toggle programmatically with toggle() method
• State persistence across page reloads (enablePersistence)

Events & State Control

📄 Read: references/events-and-state.md

• change event — react to user-driven state flips
• beforeChange event — intercept and cancel state change
• created event — run logic after component renders
• click() and focusIn() native methods

Form Integration

📄 Read: references/form-integration.md

• name and value attributes for form POST
• Rules: disabled / unchecked values are NOT submitted
• Template-driven two-way binding with ngModel
• Grouping switches by name in a form

Customization

📄 Read: references/customization.md

• cssClass for custom styles
• Reshape bar/handle (square corners via CSS)
• Custom bar colors for on/off states
• Enable ripple effect on Switch labels
• Extra HTML attributes via htmlAttributes

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 / ADA compliance
• WAI-ARIA: role="switch", aria-disabled
• Keyboard navigation (Space key to toggle)
• Screen reader support and RTL accessibility

API Reference

📄 Read: references/api.md

• All properties, methods, and events with types and defaults
• BeforeChangeEventArgs and ChangeEventArgs interfaces

Quick Start

ng add @syncfusion/ej2-angular-buttons

// src/app/app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [SwitchModule],
  selector: 'app-root',
  template: `
    <ejs-switch [checked]="isOn" (change)="onToggle($event)"></ejs-switch>
  `
})
export class AppComponent {
  isOn = false;

  onToggle(args: any): void {
    console.log('Switch is now:', args.checked);
  }
}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Common Patterns

Checked by default

<ejs-switch [checked]="true"></ejs-switch>

With ON / OFF labels

<ejs-switch [checked]="true" offLabel="OFF"></ejs-switch>

Labels are not displayed in Material themes. Avoid long custom text.

Small size

<ejs-switch cssClass="e-small"></ejs-switch>

Disabled

<ejs-switch [disabled]="true"></ejs-switch>

Two-way binding

<ejs-switch [(ngModel)]="isEnabled"></ejs-switch>
<p>State: {{ isEnabled }}</p>

Prevent state change conditionally

<ejs-switch (beforeChange)="onBeforeChange($event)"></ejs-switch>

onBeforeChange(args: BeforeChangeEventArgs): void {
  // Cancel if condition not met
  if (!this.canToggle) {
    args.cancel = true;
  }
}

Programmatic toggle

@ViewChild('switch') switchObj!: SwitchComponent;

toggle(): void {
  this.switchObj.toggle();
}

RadioButton

The Syncfusion Angular RadioButton (ejs-radiobutton) is a form input component that lets users select exactly one option from a group. It supports labels, size variants, two-way binding, form integration, accessibility, and extensive customization.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Angular 19+/21 standalone setup
• Package installation via ng add
• CSS/SCSS theme imports
• Minimal RadioButton example
• Running the application

Labels, Sizes & States

📄 Read: references/label-size-states.md

• label and labelPosition (Before/After)
• Size variants: default and small (e-small)
• checked and unchecked states
• disabled state
• enablePersistence

Forms & Data Binding

📄 Read: references/forms-and-binding.md

• name attribute for grouping radio buttons
• value attribute for form submission
• Which values are sent on form submit
• Two-way binding with [(ngModel)]
• Binding a RadioButton group to a DropDownList

Customization & Advanced Features

📄 Read: references/customization-and-advanced.md

• Custom CSS classes and appearance styles
• Right-to-left (enableRtl)
• htmlAttributes for ARIA and data attributes
• enableHtmlSanitizer and locale
• Methods: getSelectedValue(), click(), focusIn(), destroy()

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508, ADA compliance
• WAI-ARIA attributes
• Keyboard navigation shortcuts
• Screen reader support

API Reference

📄 Read: references/api.md

• All properties with types, defaults, and usage examples
• All methods with signatures
• Events and ChangeArgs interface

Quick Start

import { Component } from '@angular/core';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [RadioButtonModule],
  selector: 'app-root',
  template: `
    <ejs-radiobutton label="Option A" name="choice" value="a" [checked]="true"></ejs-radiobutton>
    <ejs-radiobutton label="Option B" name="choice" value="b"></ejs-radiobutton>
    <ejs-radiobutton label="Option C" name="choice" value="c"></ejs-radiobutton>
  `
})
export class AppComponent {}

Always set a shared name attribute on buttons that belong to the same group — this enforces mutual exclusivity.

Common Patterns

Detect Selection Change

template: `
  <ejs-radiobutton label="Credit Card" name="payment" value="credit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
  <ejs-radiobutton label="Debit Card" name="payment" value="debit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
`

onPaymentChange(args: ChangeArgs): void {
  console.log('Selected value:', args.value);  // 'credit' or 'debit'
}

Two-Way Binding with ngModel

// All buttons share [(ngModel)]="selectedValue"
template: `
  <ejs-radiobutton label="Monthly" name="plan" value="monthly"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <ejs-radiobutton label="Annual" name="plan" value="annual"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <p>Selected: {{ selectedPlan }}</p>
`

Small Size Variant

<ejs-radiobutton label="Small Option" name="size" cssClass="e-small"></ejs-radiobutton>

Disabled RadioButton

<ejs-radiobutton label="Unavailable" name="plan" [disabled]="true"></ejs-radiobutton>

Key Properties at a Glance

For the full API, read references/api.md.

SplitButton

A comprehensive guide for implementing the Syncfusion Essential JS 2 SplitButton component in Angular applications. Learn to create split buttons with dropdown menus, manage items, handle events, customize styling, and integrate with forms.

SplitButton Overview

The Syncfusion Angular SplitButton component is a versatile UI control that combines a primary button with a dropdown menu:

• Dual-action design: Primary action button + dropdown menu with multiple options
• Item management: Configure items with text, icons, separators, URLs, and disable states
• Event system: click (primary), select (item), open, close, beforeOpen events
• Popup control: Placement options, collision detection, offset adjustment, auto-positioning
• Icon support: Material Design icons, Font Awesome, Bootstrap icons, custom fonts
• Customization: CSS classes, themes (Material, Bootstrap, Fabric, Tailwind), dark mode
• Template support: Item templates with HTML content, image icons, custom rendering
• Accessibility: Full WCAG 2.2 compliance, keyboard navigation, ARIA attributes, RTL support
• Forms integration: Reactive Forms and template-driven forms support
• Dynamic updates: Add/remove items, update properties at runtime, state management

Package: @syncfusion/ej2-angular-splitbuttons

Documentation Navigation

Read the following references based on your specific needs:

Getting Started

📄 Read: references/getting-started.md

• Package installation and module setup
• CSS theme imports and dependencies
• Basic SplitButton implementation
• Component initialization with items
• Event handler setup
• Running and testing setup

Button Items Configuration

📄 Read: [refer

…(truncated)