Methods in Angular TextArea Component

13 Jun 20246 minutes to read

This section outlines the methods available for interacting with the TextArea component.

FocusIn method

The focusIn method in the TextArea, is used to set focus to the textarea element, enabling user interaction.

By calling the focusIn method, you can programmatically set focus to the TextArea component, allowing users to interact with it via keyboard input or other means.

app.component.ts

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



import { Component, ViewChild } from '@angular/core';
import { TextAreaComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea #default id="default"></ejs-textarea>
                <br/>
                <button id="button">Focus-in</button>
                </div>
              </div>`
})

export class AppComponent { 
  @ViewChild('default')
    private textareaObj?: TextAreaComponent;
    ngAfterViewInit(): void {
      (document.getElementById('button') as HTMLElement).onclick = () => {
        this.textareaObj?.focusIn();
      }
  }
}

main.ts

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

FocusOut method

The focusOut method in the TextArea component is used to remove focus from the textarea element, ending user interaction.
This method is beneficial for scenarios where user need to programmatically remove focus from the TextArea component, such as after completing a specific task or when navigating to another element in the application.

app.component.ts

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



import { Component, ViewChild } from '@angular/core';
import { TextAreaComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea #default id="default"></ejs-textarea>
                <br/>
                <button id="button">Focus-Out</button>
                </div>
              </div>`
})

export class AppComponent { 
  @ViewChild('default')
    private textareaObj?: TextAreaComponent;
    ngAfterViewInit(): void {
      (document.getElementById('button') as HTMLElement).onclick = () => {
        this.textareaObj?.focusOut();
      }
  }
}

main.ts

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

GetPersistData method

The getPersistData method in the TextArea component retrieves the properties that need to be maintained in the persisted state.
This method returns an object containing the properties to be persisted, which can include various configuration options and state information of the TextArea component.

app.component.ts

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



import { Component, ViewChild } from '@angular/core';
import { TextAreaComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea #default id="default"></ejs-textarea>
                <br/>
                <button id="button">Get Persist-data</button>
                </div>
              </div>`
})

export class AppComponent { 
  @ViewChild('default')
    private textareaObj?: TextAreaComponent;
    ngAfterViewInit(): void {
      (document.getElementById('button') as HTMLElement).onclick = () => {
        this.textareaObj?.getPersistData();
      }
  }
}

main.ts

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