My Process:
Within my interface, I utilize both a dropdown menu and a textarea field. I input text into the textarea and select certain words from the dropdown menu to add to the textarea. I have successfully completed this task.
The Issue at Hand:
Now, I am looking to distinguish the words that originate from the dropdown menu. Specifically, I aim to display these particular words in a red color. Any word entered through the dropdown menu or manually entered word that matches one of the dropdown menu values should be displayed in red. This is the functionality I am striving to achieve. Despite my efforts to find a solution on stackoverflow, I have been unsuccessful thus far. I would greatly appreciate any assistance this community can provide.
My Code:
HTML Markup:
<textarea #text [(ngModel)]='textValue' rows="10" cols="70">
</textarea>
<div>
<mat-form-field class="input-style">
<label>Dropdown Menu</label>
<mat-select (change)="changeValue($event)">
<mat-option *ngFor="let li of list4" [value]="li">
{{li}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
My TypeScript:
changeValue(ev) {
this.textValue += ` ${ev.value}`;
}
Feel free to check out my stackblitz for a live demonstration: https://stackblitz.com/edit/angular-mat-form-field-tfw6de?file=app%2Fform-field-prefix-suffix-example.ts