Size Mode for Syncfusion® Angular Components

5 Apr 20256 minutes to read

Modern web applications are designed to accommodate various devices, including desktops and mobile, often necessitating distinct layouts or interfaces for optimal viewing on smaller screens. Syncfusion® Angular components support two size modes: touch (bigger) and normal. The touch mode enhances mobile device responsiveness by incorporating the e-bigger class for improved interaction and visibility.

Size Mode for Application

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

<body class="e-bigger">
    ...
</body>

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