ngClass directive to use with ngFor

Question

I have some list elements, which I am rendering using *ngFor directive. However, some part of the list items text should be bold according to the specs. I tried to do this with the [ngClass]="'strong'" when strong is the css class I need to add some portion on the text. When I run the application the result was the whole text become bold. Below is the screenshot for your better understanding.

The requirement is to make the dollar part bold only. I am new to the angular development. Any help would be greatly appreciated.

<ul>
      <li *ngFor="let text of income; let i = index" [ngClass]="'strong'">{{text.text}}</li>
    </ul>
income = [
    {text:'Your Annual Income:* $1,316,422'},
    {text:'Your Monthly Income: $109,702'}
  ];

Answer 1

Try with this code:

<ul>
    <li *ngFor="let text of income">
        {{ text.split(':')[0] }}: <span class="strong">{{ text.split(':')[1] }}</span>
    </li>
</ul>

Answer 2

As long as you're sure it's only about the first letter, you don't need Angular. Nor even JavaScript. There's a pure CSS solution.

 .first-letter-bold::first-letter { font-weight: 900; font-size: 110%; }

 <ul> <li class="first-letter-bold">$1,316,422</li> <li class="first-letter-bold">$1,316,422</li> </ul>

Answer 3

It's because the {{text.text}} contains the full text. You have to split the "li" like this

<ul>
  <li *ngFor="let income of incomes; let i = index" [ngClass]="'strong'">{{income.text}}{{income.value</li>
</ul>


incomes = [
  {text:'Your Annual Income:*',
    value: '$1,316,422'},
  {text:'Your Monthly Income:'
    value: '$109,702'}
 ];

Answer 4

As other answers have identified, you need to split your text. My preference for this would be to create in interface that models the different parts of the income text.

export interface Income {
  amount: string;
  currencySymbol: string;
  text: string;
}

In your component or service (wherever makes sense when it comes to reusing the interface), you would map the text to the interface. This is where the complexity lies. I will show a version of using it in the component for simplicity. In reality you would do this in your service for reusability.

incomes: Income[];

ngOnInit() {
  this.service.getIncomeTexts().subscribe((texts: string[]) => {
    this.incomes = texts.map(x => this.mapTextToIncome(x));
  });
}

private mapTextToIncome(text: string): Income {
  // this regex will match a string that ends with a dollar symbol 
  // followed by numbers or commas
  // You could extend the possible currency symbols if required
  const parts: string[] = /^(.+)(\$)([\d+,]+)$/.exec(text);
  return {
    amount: parts[3],
    currencySymbol: parts[2],
    text: parts[1]
  };
}

And then it becomes trivial to use in your HTML:

<ul *ngIf="incomes">
  <li *ngFor="let income of incomes">
    <span>{{income.text}}</span>
    <span class="strong">{{income.currencySymbol}}</span>
    <span>{{income.amount}}</span>
  </li>
</ul>

I have left amount as a string in my example, but you might want to parse it and treat it as a number so that you can apply your own formatting if you wish.

DEMO: https://stackblitz.com/edit/angular-do6joa

Regex demo: https://regex101.com/r/e4nLLO/2

Of course, the correct answer is that your API should return data in a better format :)

Answer 5

I have modified only the template part which you have given.

With the consideration of data from backend, and assuming that the text will be like you have given, the solution as follows..

Using [innerHTML] property you can give the string split up step by step and when you reach the $ part, just give class <b> </b> like,

You can split the text part by part like, '<b>'+ text.text.split(' ')[3][0] + '</b>' .

By this way, you can make only the $ as bold and remaining text as it is..

<ul>
  <li *ngFor="let text of income; let i = index">
    <div [innerHTML]="text.text.split(' ')[3][0] ? text.text.split(' ')[0] + ' ' + text.text.split(' ')[1]+ ' ' + text.text.split(' ')[2] + ' ' + '<strong>'+ text.text.split(' ')[3][0] + '</strong>' + ' ' + text.text.split(' ')[3].substring(1) : text.text"></div>
    </li>
</ul>

Working Stackblitz