Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Question

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string.

In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}.

My question is, how can I apply some css to specific letters within the data variable while displaying it in the UI?

For example:

app.component.ts

data: string = "stack overflow"

app.component.html

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

How can I highlight the background color of the word 'overflow' using css? I know that Pipes are used to modify values, but in this case, I need to apply css.

Additionally, another requirement is that initially, the value will be displayed on the browser, and the word to be highlighted will come from an input box.

css angular typescript string-interpolation

Answer 1

Answer №1

If you're looking to add some visual flair to your text, consider this option:

.ts

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

.html

  <p [innerHTML]="addHighlight('hello there', 'there')"></p>

Answer 2

If you're looking to add some visual flair to your text, consider this option:

.ts

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

.html

  <p [innerHTML]="addHighlight('hello there', 'there')"></p>

Answer 3

Answer №2

To separate a given word into individual <span> elements, one solution is to use a pipe:

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

In the component, you can utilize the pipe like this:

<div [innerHTML]="data | letterByLetter"></div>

. You can also choose to use DomSanitizer instead of innerHtml if preferred.

You have the flexibility to define the appearance of the span element by setting classes or styles directly.

Best of luck!

Answer 4

To separate a given word into individual <span> elements, one solution is to use a pipe:

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

In the component, you can utilize the pipe like this:

<div [innerHTML]="data | letterByLetter"></div>

. You can also choose to use DomSanitizer instead of innerHtml if preferred.

You have the flexibility to define the appearance of the span element by setting classes or styles directly.

Best of luck!

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Answer №1

Answer №2

Similar questions

A guide on utilizing Angular service within a component to successfully submit form data to an API

switching the content of an element using Javascript

Leverage the power of TypeScript custom transformer and project reference for enhanced

Adding a <span> element within an <h1> tag in WordPress

Utilizing Host Styles in Angular2 Components

The variable 'key' is declared in the Google Chrome extension V3 local storage, but it appears that its assigned value is never actually accessed

What is the best way to accomplish this using typescript/adonis?

"Define a TypeScript function type that can return either an object or a string depending on whether it succeeds or fails

Unable to connect to web3 object using typescript and ethereum

Is it necessary to use an EventEmitter explicitly when performing two-way binding in Angular 2?

Enable a single column to scroll until the content is fully displayed, and then stay in a fixed position

What is the best way to retrieve information utilizing Http.get within my project?

Issue encountered with redux-toolkit's createAsyncThunk functionality

Several dropdown menus within the same container, working independently of each other

Encountering an issue while trying to launch an Angular application on localhost. Vendor.js resource failed to load

Guide to linking Angular 2 with a backend server

Looking for assistance with transforming my Angular 2 component into an npm package

Angular Elements generates compact, single-line HTML output

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?