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";
