CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
newUser
newUser

Reputation: 531

Change background color Angular Text Higlighting

I was able to highlight the text with this https://mattlewis92.github.io/angular-text-input-highlight/. How do I change the text color so that it is not the same as the text background color?

My idea would be to put the spans produced on top of the textarea. But it wouldn't make the textarea not clickable (when clicked on highlighted parts)?

Upvotes: 0

Views: 1247

Answers (1)

Sven Cazier
Sven Cazier

Reputation: 407

There are a few things you could do, all of them involve CSS (so you need a custom CSS file).

If you want to use the same color you could add this rule:

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

If you want to have a fixed color with different background colors:

.bg-blue {
    color: some_color;
}

.bg-pink {
    color: some_other_color;
}

If you want to be able to put different colors per background color:

.text-blue {
    color: blue
}

.text-red {
    color: red;
}

And then you change your code to add those text color classes:

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

This only works with a few colors though because it appears to be superimposed on the original black text.

So in order to make this work with every kind of color you need to make the regular text transparent:

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

And in your code you apply the hightlight to all text but don't put any classes for regular text e.g.

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 } }
}];

The first part will look like regular text and the latter will have a blue background with red text.

Hope this makes sense.

Update:

Be sure to add the indices of the non-highlighted text to the HighlightTag array as well, as shown here: https://stackblitz.com/edit/angular-ivy-my8her?file=src%2Fapp%2Fapp.component.ts (the css doesn't apply on Stackblitz though), so that it get wrapped in a span as well.

And if you have set the color to transparent you need to provide a default color for the text within the spans.

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

Then you can do

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

With color set to white for .bg-blue it'll look like this:

enter image description here

Update 2:

I looked a little deeper at the HTML and you don't have to wrap the unhighlighted text in a span if you don't want to. This should do the trick:

.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;
}

Applied to the demo page:

enter image description here

Upvotes: 1

Related Questions