Rows and Columns in Angular TextArea Component

26 Feb 20262 minutes to read

The rows and columns attributes play a crucial role in customizing the TextArea’s appearance and layout. The rows attribute determines the initial visible number of lines within the TextArea, controlling its vertical size. The cols attribute specifies the visible width of the TextArea in characters per line, determining its horizontal size.

Customize the TextArea dimensions by setting the number of rows using the rows property and the number of columns using the cols property. These properties provide precise control over the textarea dimensions, ensuring it fits seamlessly within your application’s layout.

app.component.ts

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



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <div>
                  <ejs-textarea id="default1" placeholder="Enter your comments" floatLabelType="Auto" rows="3" cols="35"></ejs-textarea>
                </div>
                <div>
                  <ejs-textarea id="default2" placeholder="Enter your comments" floatLabelType="Auto" rows="5" cols="40"></ejs-textarea>
                </div>
                </div>
              </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));