Size Mode for Syncfusion® Angular Components

14 Aug 20256 minutes to read

Modern web applications need to provide optimal user experiences across a wide range of devices – from large desktop monitors to small mobile screens. Syncfusion® Angular components address this challenge by offering two distinct size modes: normal (default) and touch (bigger). This flexibility allows developers to create interfaces that are appropriately sized for different interaction methods and screen sizes.

Understanding Size Modes

Size modes control the physical dimensions and touch targets of UI components:

  • Normal Mode: Optimized for mouse/keyboard interactions with standard-sized UI elements
  • Touch Mode: Provides larger UI elements with increased touch targets for better touch interaction

Size Mode for Application

To apply touch mode (bigger) for an entire application, add the e-bigger class to the body element in the index.html file:

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

This global approach ensures all Syncfusion components throughout your application render with the touch-optimized larger size.

Size Mode for a Component

Touch mode (bigger) can also be activated for individual components by adding the e-bigger class to the div element containing the component. Alternatively, use the component’s cssClass property to apply the e-bigger class.

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));

Change Size Mode for Application at Runtime

To toggle an application’s size mode between touch and normal (mouse) at runtime, simply add or remove the e-bigger class. The following code demonstrates how to change the size mode dynamically:

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));

Change Size Mode for a Component at Runtime

You can switch a component’s size mode between touch and normal at runtime by toggling the e-bigger CSS class.

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));

See Also