Styling over string interpolation in HTML - Angular

Question

Let's say template receives string from component in one way binding, interpolation:

<span>{{list.members}}</span>

And it renders like

5 members

How can I edit string on HTML without changing anything on component so I can get bold number 5 and "members" left untouched:

5 members

Answer 1

Here's a pipe solution:

strong-number.pipe.ts:

@Pipe({name: 'strongifyNumber'})

export class StrongifyNumber implements PipeTransform {
  transform(value: string): string {
    let values: string[] = value.split(' ')
    if(values.length == 2){
        return ' <b>'+values[0]+'</b> ' + values[1];
    }
    return value;
  }
}

app.module.ts:

import { StrongifyNumber } from './strong-number.pipe';
@NgModule({
  declarations: [
    AppComponent, StrongifyNumber
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [StrongifyNumber],
  bootstrap: [AppComponent]
})

template:

<span [innerHTML]="list.members | strongifyNumber"></span>