Photo by Kelly Sikkema on Unsplash

Manipulate text when pasting in html <textarea>. Angular

Recently I had to handle the pasting and manipulating data, in one of our Angular projects. We are using Angular 11 and Typescript of course. The nice part is that almost 100% of the solution is irrelevant to Angular and is solely based on DOM events and JS. So, I thought that it would be nice to share.

At first we have to bind our method with the “paste” listener in our textarea component. We have a custom component for <textarea>, but the binding is the same also in the standard html tag.

After that we move on to create the function inside our component:

That’s it. In that way we manipulate the pasted text and put it properly inside the pre-existing one.