Is there a way in Angular to style strings or single letters in the array?-CodePudding

I have an array:

public displayFaqsItems = [
{
      key: '1',
      question: 'How can I add a new / additional company / companies?',
    },
{
      key: '2',
      question: 'How can I add more users?',
    },
{
      key: '3',
      question: 'How can I assign user rights?',
    },
];

Since I iterate over an *ngFor in the template and output the questions via an interpolation, it is hard to style the desired words individually. Is there a way to style the string in the component with HTML and then use it in the array. Unfortunately I have not found a solution... Do you have any ideas or can you help me please???

CodePudding user response：

you can try to use Render HTML string techniques in Angular.

<div [innerHTML]="htmlString"></div>

CodePudding user response：

You can assign class in your question like below and you can display it using innerHTML.

I have assigned custom-style class to specific word.

app.component.ts

public displayFaqsItems = [
{
      key: '1',
      question: 'How can I add a new / additional company / companies?',
    },
{
      key: '2',
      question: 'How can I add more <span >users</span>?',
    },
{
      key: '3',
      question: 'How can I assign <span >user rights</span>?',
    },
];

app.component.html

<ul>
  <li *ngFor="let faq of displayFaqsItems">
     <div [innerHTML]="faq.question"></div>
  </li>
</ul>

app.component.css

.custom-style{
   background-color:red;
   color:white;
}