Events in Angular TextArea Component

26 Mar 20245 minutes to read

This section describes the TextArea events that will be triggered when appropriate actions are performed. The following events are available in the TextArea component.

Created event

The TextArea component triggers the created event when the TextArea component is created. This event provides users with an opportunity to perform actions immediately after the TextArea has been created and initialized.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                    <ejs-textarea id="default" (created)="created()></ejs-textarea>
                </div>`
})

export class AppComponent {
  public created(){
    //Your required action here
  };
}

Input event

The TextArea component triggers the input each time when the value of TextArea has changed. This event provides users with an opportunity to perform actions in response to real-time changes in the TextArea’s content.
The InputEventArgs passed as an event argument provides the details about the input event in the TextArea.

import { Component } from '@angular/core';
import { InputEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <ejs-textarea id="default" (input)="inputHandler($event)"/>
                </div>`
})

export class AppComponent {
  public inputHandler(args: InputEventArgs){
    //Your required action here
  };
}

Change event

The TextArea component triggers the change event when the content of TextArea has changed and gets focus-out. This event provides users with an opportunity to execute specific actions in response to changes made by the user.
The ChangedEventArgs passed as an event argument provides the details about the changes in the TextArea’s value.

import { Component } from '@angular/core';
import { ChangedEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <ejs-textarea id="default" (change)="changeHandler($event)"/>
                </div>`
})

export class AppComponent {
  public changeHandler(args: ChangedEventArgs){
    //Your required action here
  };
}

Focus event

The TextArea component triggers the focus when the TextArea gains focus. This event allows developers to execute specific actions when the user interacts with the TextArea by focusing on it.
The FocusInEventArgs passed as an argument provides details about the focus event in the TextArea.

import { Component } from '@angular/core';
import { FocusInEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <ejs-textarea id="default" (focus)="focusHandler($event)"/>
                </div>`
})

export class AppComponent {
  public focusHandler(args: FocusInEventArgs){
    //Your required action here
  };
}

Blur event

The TextArea component triggers the blur when the TextArea loses focus. This event allows users to execute specific actions when the user interacts with the TextArea by moving focus away from it.
The FocusOutEventArgs passed as an argument provides details about the blur event in the TextArea.

import { Component } from '@angular/core';
import { FocusOutEventArgs } from '@syncfusion/ej2-angular-inputs';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <ejs-textarea id="default" (blur)="blurHandler($event)"/>
                </div>`
})

export class AppComponent {
  public blurHandler(args: FocusOutEventArgs){
    //Your required action here
  };
}

Destroyed event

The TextArea component triggers the destroyed when the TextArea component is destroyed.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                    <ejs-textarea id="default" (destroyed)="destroyed()></ejs-textarea>
                </div>`
})

export class AppComponent {
  public destroyed(){
    //Your required action here
  };
}