HelpBot Assistant

How can I help you?

Size Modes in Syncfusion® Angular Components

2 Feb 20266 minutes to read

Syncfusion® Angular components support two size modes to optimize user experience across different devices and input methods:

  • Normal mode (default) — Standard sizing optimized for mouse and keyboard interactions.
  • Touch mode (bigger) — Larger elements with increased padding, font sizes, and touch targets for improved touch interaction and accessibility.

Touch mode enhances usability on tablets, mobile devices, and touch-enabled laptops by making buttons, icons, and interactive areas easier to tap accurately.

Applying Touch Mode Globally (Entire Application)

Add the e-bigger class to the <body> element in index.html:

<body class="e-bigger">
  <!-- Application content -->
</body>

This applies the larger size mode to all Syncfusion® components across the application.

Applying Touch Mode to a Specific Component

You can enable touch mode for individual components in two ways:

  1. Add the e-bigger class directly to the component’s wrapper element.
  2. Use the component’s cssClass property to include e-bigger.

Example (using cssClass):

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




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

@Component({
imports: [
        
        ButtonModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-bigger">
  <button ejs-button>Button</button>
  </div>`
})

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

Toggling Size Mode Dynamically (Application Level)

Switch between normal and touch modes at runtime by adding/removing the e-bigger class on the <body> element.

Example:

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




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

@Component({
imports: [
        
        CalendarModule,
        ButtonModule
    ],


standalone: true,
  selector: 'app-root',
  template: `
  <div>
    <div>
      <button ejs-button content="Touch Mode" (click)="onTouchClick($event)"></button>
      <button ejs-button content="Mouse Mode" (click)="onMouseClick($event)"></button>
    </div>
    <div>
    <ejs-calendar></ejs-calendar>
    </div>
  </div>
    `
})

export class AppComponent {
  onTouchClick(e: any): void {
    document.body.classList.add('e-bigger');
  }
  onMouseClick(e: any): void {
    document.body.classList.remove('e-bigger');
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Toggling Size Mode Dynamically (Component Level)

Dynamically apply or remove the e-bigger class on a specific component.

Example:

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




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

@Component({
imports: [
        
        CalendarModule,
        ButtonModule
    ],


standalone: true,
  selector: 'app-root',
  template: `
  <div>
    <div>
      <button ejs-button content="Touch Mode" (click)="onTouchClick($event)"></button>
      <button ejs-button content="Mouse Mode" (click)="onMouseClick($event)"></button>
    </div>
    <div class="control">
    <ejs-calendar></ejs-calendar>
    </div>
  </div>
    `
})

export class AppComponent {
  onTouchClick(e: any): void {
    let controls = document.querySelectorAll('.control');
      for (let index: number = 0; index < controls.length; index++) {
        controls[index].classList.add('e-bigger');
      }
  }
  onMouseClick(e: any): void {
    let controls = document.querySelectorAll('.control');
      for (let index: number = 0; index < controls.length; index++) {
        controls[index].classList.remove('e-bigger');
      }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Best Practices

  • Use touch mode (e-bigger) when targeting mobile/tablet users or touch-first experiences.
  • Combine with responsive layouts and media queries for optimal cross-device support.
  • Test touch targets with real devices to ensure minimum 44×44 px interactive areas (WCAG recommendation).
  • For performance-critical apps, consider using optimized (lite) theme files if bigger mode is rarely used.

See Also