Copy to clipboard from kendo textarea in Angular

Question

I am trying to copy text from a HTML kendo textarea, I found a solution with a regular textarea but unable to implement the solution with a kendo-textarea:

https://stackblitz.com/edit/angular-mvfpr6?embed=1&file=src/app/app.component.html

When I try to implement the same for kendo textarea it throws the below error: inputElement.select is not a function

My stackblitz app: https://stackblitz.com/edit/angular-7zcv4o?file=app/app.component.ts

Answer 1

You're very close in your solution. In the copyInputMessage method, set the type of inputElement to be TextAreaComponent . The API documentation of the component can be found here: https://www.telerik.com/kendo-angular-ui/components/inputs/api/TextAreaComponent

After you specify the type, get the input field from the component and get the nativeElement property of the input . With this value, you can call select and setSelectionRange .

Here is an example:

public copyInputMessage(inputElement: TextAreaComponent) {
  const elementRef = inputElement?.input?.nativeElement;
  if (!elementRef) {
    return;
  }
  elementRef.select();
  document.execCommand('copy');
  elementRef.setSelectionRange(0, 0);
}

Example: https://stackblitz.com/edit/angular-7zcv4o-iddki1

FYI - It might be worth opening a "success" toast at the end of the method to indicate to the user that the text was copied.