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](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](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](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](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](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](references/button-api.md) - All properties with types, defaults, and code samples - Methods: `click()`, `focusIn()`, `destroy()` - Events: `created` --- ### Quick Start ```bash ng add @syncfusion/ej2-angular-buttons ``` ```typescript // 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 ```html <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 ```html <button ejs-button iconCss="e-icons e-save">Save</button> <button ejs-button iconCss="e-icons e-delete" iconPosition="Right">Delete</button> ``` #### Toggle Button ```typescript // 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'; } } ``` ```html <button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true" content="Play"></button> ``` #### Disabled Button ```html <button ejs-button [disabled]="true">Disabled</button> ``` #### Block (Full-Width) Button ```html <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](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](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](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](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](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:** ```bash ng add @syncfusion/ej2-angular-buttons ``` **2. Add CSS to `styles.css`:** ```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:** ```typescript 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: ```html <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: ```html <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) ```html <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) ```html <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 | User Need | Approach | |---|---| | Group action buttons visually | Basic `e-btn-group` with `ejs-button` | | Only one option selectable at a time | Radio type (input[radio] + label.e-btn) | | Multiple options selectable | Checkbox type (input[checkbox] + label.e-btn) | | Stack buttons vertically | Add `e-vertical` to container | | Buttons with icons | `iconCss` property on each `ejs-button` | | Rounded edges on group | `e-round-corner` on container | | RTL layout | `e-rtl` on container | | Programmatic initialization | `createButtonGroup` from `@syncfusion/ej2-splitbuttons` | | Extend group with dropdown/popup | Nest `ejs-dropdownbutton` or `ejs-splitbutton` | --- ## 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](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](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](references/dropdownbutton-popup-items.md)