Sizing in Angular TextBox component

26 Oct 20242 minutes to read

You can render the TextBox in three different sizes.

Property	Description
Normal	By default, the TextBox is rendered with normal size.
Small	You need to add e-small class to the cssClass property to render the TextBox in smaller size
Bigger	You need to add e-bigger class to the cssClass property to render the TextBox in bigger size

Note: You can customize the styles of the TextBox by using the cssClass property. This property allows you to add a custom class to the TextBox, which can then be used to apply your own styling to the component

app.component.ts

import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
imports: [
        TextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <h4> Bigger Size </h4>
                <ejs-textbox placeholder = "Enter Name" floatLabelType="Auto" cssClass="e-bigger"></ejs-textbox>
                <h4> Small Size </h4>
                <ejs-textbox placeholder = "Enter Name" floatLabelType="Auto" cssClass="e-small"></ejs-textbox>
              </div>`
})

export class AppComponent {
  
}

main.ts

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