Custom styling of text substrings in dynamic Angular templates

Question

Is it possible to apply styles like bold / italic or both together in angular 6 by just having starting and ending point of the text while creating or after creating the components dynamically ? Right now I'm able to apply styles for the whole component but i wanted to apply style only for a particular text in the element and the length of the text will be from JSON.

Please find stackblitz implementation here.

Actual result should apply the style to text based on the offset and length

Answer 1

Yes, you should be able to achieve this with a conditional ngStyle statement, based on the length of the text string, or other criteria. E.g. apply bold and italic styling if your text string is longer than 20 characters:

<div [ngStyle]="textString.length > 20 && {'font-weight': 'bold', 'font-style': 'italic'}">{{textString}}</div>

Further information here and here is an example on Stackblitz.

Alternatively you can apply ngClass conditionally in the same way, and have your custom styling in your CSS file.