I see multiple issues here.
Binding a function to directive [innerHTML]="formatTableEntry(tableEntry)"
will lead to performance issues in default change detection strategy.
Using innerHTML
binding like you're attempting is not elegant in Angular.
font-weight: 500
is the default weight value. Bold is equal to 700.
Perhaps unimportant to the actual issue, but the Stackblitz doesn't seem to work for me in FF and Chrome.
Solution
You could whip up a quick pipe to split the sentences to the required format.
split.pipe.ts
@Pipe({
name: 'split',
pure: true
})
export class SplitPipe implements PipeTransform {
transform(value: any, args?: any): any {
if (!value) {
return null;
}
return value.reduce((acc, curr) => {
const [first, ...rest] = curr.split(" ");
acc.push({ first: first, rest: rest.join(" ") });
return acc;
}, []);
}
}
It could then be use in conjunction with *ngFor
directive akin to keyvalue
pipe.
Try the following
app.component.ts
@Component({
selector: "my-app",
template: `
<div id="page-image-title-table">
<div
class="page-image-title-table-row"
*ngFor="let tableEntry of (tableEntries | split)"
>
<span>
<span class="first-entry-word">{{ tableEntry.first }}</span>
{{ tableEntry.rest }}
</span>
</div>
</div>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent {
tableEntries = [
"First element of the array",
"Second sample element of the array",
"lorem ipsum dolor sit amet",
"Quick brown fox jumps over the lazy dog"
];
}
app.component.css
#page-image-title-table .first-entry-word {
font-weight: 700;
}
Working example: Stackblitz
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…