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
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> I have based on the answer of Visionstar credits to him
The problem is, that the :first-letter doesn't work on inline-element(such as span e.g), but on block/inline-block elements (e.g. p, table caption, table cell, etc). Bold on span first letter not working
span:first-of-type:first-letter { font-weight: bold; } p:first-of-type:first-letter { font-weight: bold; }<span style="display: block;">5 members</span> <p> 5 members</p>thanks to the comment of aragorn for complete the answer in the case where you have a number greater than a digit I think you could use a js function to get the content of the span and edit it, as I saw other posts there are people who are waiting for CSS4, or a word selector for css that does not exist yet
var text=$('#myspan').text() first = text.slice(0, text.indexOf(" ")); other=text.slice(text.indexOf(" "), text.lenght); var newdata="<span class='number'>"+first+"</span> "+other; $('#myspan').html(newdata);span:first-of-type:first-letter { font-weight: bold; } p:first-of-type:first-letter { font-weight: bold; } .number { font-weight: bold; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span style="display: block;">5 members</span> <p> 5 members</p> <span id="myspan" style="display: block;">100 members members</span>
You can separate the value in the component.ts file and keep in separate variables the "members" word and the "number".
const value = "5 members".split(" "); const membersLabel = value[1]; const membersValue = value[0]; Having them separate, you can style it as you like
<strong>membersValue</strong> <span>{{membersLabel}}</span> It's not that bullet proof though. You should write it in a way to prevent the cases in which you won't have the pattern "# members";
