html - Angular 2 flera textfärger i en textarea

Jag har ett textområde med en sträng bunden till det. Med textfärgen som vit som standard.

<textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea>

Den bundna strängen innehåller flera variabler.

return this.outputText = this.test1 + " test1Stat" + this.test2 + " test2Stat" + this.test3 + " test3Stat";

Det jag vill göra är att om test1 är mindre än 1, ska det visa "test1 test1Stat" i rött, medan allt annat är i grönt. Finns det ett sätt att göra detta?

Svar #1

Det är inte möjligt att färga en del av texten i ett textarea-fält, men du kan istället försöka använda egenskapen 'contenteditable'.

Det gör i princip din div till en textruta, och du kan använda HTML-taggar och liknande inuti.

.greenText{
color:green;}

div{
border:black solid 1px;
padding:20px;
}

    <div contenteditable="true">text text <span class='greenText'>GREEN TEXT</span> more text that you can edit</div>