Applying css to some part of typescript variable through interpolation in Angular

Question

Let's say I have a variable named data in app.component.ts which is of type :string.

In app.component.html I am showing the value of data to the UI using string interpolation like {{data}}.

Now my question is while displaying the value in a UI, I need to apply some css to some specific letters present in a data variable.

For example:

app.component.ts

data : string = "stack overflow"

app.component.html

<p>{{data}}</p>

How to highlight the background color of the word overflow using css?. And I hear that Pipes can be used to modify the value. But here I am in a need of applying css.

And one more constraint is there, initially the value will be displayed to the browser; the word to be highlighted will be coming from input box.

Akirus · Accepted Answer · 2020-02-28 07:48:05Z

2

You could use something among the lines of:

.ts

  highlightKeyWord(sentence: string, keyWord: string) {
      sentence = sentence.replace(keyWord, 
          `<span style="background-color: #35a5f8;">${keyWord}</span>`);
      return this.sanitizer.bypassSecurityTrustHtml(sentence);
  }

.html

  <p [innerHTML]="highlightKeyWord('hello world', 'world')"></p>

answered Feb 28, 2020 at 7:48

Akirus

5744 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

SaravananKS Over a year ago

Why ${keyWord} instead of {{keyWord}

Akirus Over a year ago

<span style="background-color: #35a5f8;">${keyWord}</span> is a template literal and the same as <span style="background-color: #35a5f8;">' + keyWord + '</span>' I'm pretty sure {{keyWord}} can't work since you normally bind to a variable in your component.ts not to a parameter of a function. Even if it did though, there is no point in doing it since the highlightKeyWord function already does the updating. A more 'real' implementation would be to have sentence and keyWord as variables in your component and update your html to be: [innerHTML]="highlightKeyWord()"

SaravananKS Over a year ago

how to maintain capital and small letters as it is

SaravananKS Over a year ago

if highlighting words as case insensitively means, we need to highlight the main word as it as

Akirus Over a year ago

The current example should maintain the original text as is. Please provide an example of the issue you're having / expected behavior.

|

Beniamin · Accepted Answer · 2020-02-28 07:45:48Z

1

One solution is use pipe to extract given word into separate <span> elements:

@Pipe({
  name: 'letterByLetter'
})
export class LetterByLetter implements PipeTransform {
  transform(value: string): string {
    return value
      .split('')
      .map((letter) => {
        return `<span>${letter}</span>`;
      })
      .join('');
  }
}

Then in component there is possibility to use the pipe in this way <div [innerHTML]="data | letterByLetter"></div>. Notice i've used innerHtml but you can use DomSanitizer instead - which should be better)

After that you are able to decide how the span element should looks. You can set either the class or style directly.

Good luck!

answered Feb 28, 2020 at 7:45

Beniamin

5781 gold badge4 silver badges13 bronze badges

6 Comments

Akirus Over a year ago

Wouldn't the styles applied to the <span> still get scrapped if you don't use the sanitizer?

Beniamin Over a year ago

Yes you are right, if you want apply the style to the element you should use bypassSecurityTrustHtml method otherwise it will be removed.

SaravananKS Over a year ago

I need to highlight only some letter in the whole string

Beniamin Over a year ago

I understand, you can pass argument(s) to pipe as a second parameter of transform. And later make your logic inside the pipe. For example inside map: return letter === 'a' ? 'letter a styles' : 'other styles'

Beniamin Over a year ago

It depends what you need, I vote for pipe, keep your code clean and delegate logic outside component.

|

Collectives™ on Stack Overflow

Applying css to some part of typescript variable through interpolation in Angular

2 Answers 2

11 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related