Hay algunas cosas que podría hacer, todas ellas involucran CSS (por lo que necesita un archivo CSS personalizado).

Si desea utilizar el mismo color, puede agregar esta regla:

 .text-input-highlight-container .text-highlight-tag { color: some_color; }

Si desea tener un color fijo con diferentes colores de fondo:

 .bg-blue { color: some_color; } .bg-pink { color: some_other_color; }

Si desea poder poner diferentes colores por color de fondo:

 .text-blue { color: blue } .text-red { color: red; }

Y luego cambia su código para agregar esas clases de color de texto:

 tags: HighlightTag[] = [{ indices: { start: 8, end: 12 }, cssClass: 'bg-blue text-red', data: { user: { id: 1 } } }];

Sin embargo, esto solo funciona con algunos colores porque parece estar superpuesto al texto negro original.

Entonces, para que esto funcione con todo tipo de color, debe hacer que el texto normal sea transparente:

 .text-input-highlight-container textarea { color: transparent; }

Y en su código, aplica el resaltado a todo el texto, pero no coloca ninguna clase para el texto normal, por ejemplo.

 tags: HighlightTag[] = [{ indices: { start: 0, end: 11 }, cssClass: '', data: { user: { id: 1 } } }, { indices: { start: 8, end: 12 }, cssClass: 'bg-blue text-red', data: { user: { id: 1 } } }];

La primera parte se verá como texto normal y la segunda tendrá un fondo azul con texto rojo.

Espero que esto tenga sentido.

Actualizar:

Asegúrese de agregar también los índices del texto no resaltado a la matriz HighlightTag, como se muestra aquí: https://stackblitz.com/edit/angular-ivy-my8her?file=src%2Fapp%2Fapp.component.ts (Sin embargo, el css no se aplica en Stackblitz), por lo que también se envuelve en un lapso.

Y si ha establecido el color en transparente, debe proporcionar un color predeterminado para el texto dentro de los intervalos.

 .text-input-highlight-container .text-highlight-tag { color: black; //or any other color you want for the non-highlighted text }

Entonces puedes hacer

 .bg-blue { color: lightblue !important; } //background-color for bg-blue is lightblue so I wouldn't set text color to lightblue though

Con el color establecido en blanco para .bg-blue, se verá así:

Actualización 2:

Examiné un poco más el HTML y no es necesario que envuelva el texto no resaltado en un lapso si no lo desea. Esto debería funcionar:

 .text-input-highlight-container .text-input-element { //the textarea color: transparent; } .text-input-highlight-container .text-highlight-element { //the superimposed text color: black; border-color: transparent; //otherwise you'll get a black border } .bg-blue { color: white; }

Aplicado a la página de demostración: