CODEWITHSUNDEEP
javascriptangularkendo-ui
Matt Ryan
Matt Ryan

Reputation: 39

Copy to clipboard from kendo textarea in Angular

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

Upvotes: 0

Views: 1072

Answers (1)

David
David

Reputation: 6131

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.

Upvotes: 0

Related Questions