Bryan
Bryan

Reputation: 3009

Textarea with keyword tags in Angular

Is it possible to have a textarea that allows plain text, but turns certain keywords into "Chips" (or some other styled equivalent)? Ideally I would be able to do this with Angular Material, but I'd be willing to use another library compatible with Angular too. I've done a lot of searching and can't find what I'm looking for.

The "Chips with input" and "Chips with autocomplete" examples here are similar to what I want, but doesn't seem to allow plain text: https://material.angular.io/components/chips/examples

Upvotes: 2

Views: 1270

Answers (1)

Wandrille
Wandrille

Reputation: 6821

You can do it with some workaround:

You display a <div [innerHTML]="formatedCode"> with the formated text inside

When you click on it, you display instead the <text-area [value]="formatedCode"> so the user can modify the content.

When the user is done, you map the content to the formated code you want. and display the <div>

Upvotes: 1

Related Questions