CODEWITHSUNDEEP
cssangular
AD_SK
AD_SK

Reputation: 71

Custom styling of text substrings in dynamic Angular templates

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

Upvotes: 3

Views: 5100

Answers (2)

Matt Saunders
Matt Saunders

Reputation: 4074

Method 1 - Slice Pipe

If you want to add styling based on character positions within some text, rather than the overall length of some text, and you want to do this purely in your HTML template, you could achieve this with the slice pipe.

I've put an example of how this could be applied below and on Stackblitz. The HTML markup is horrible, and line breaks must not be used in the code because these introduce unwanted spaces into the rendered text, but I believe it covers what you're asking for:

For a single highlight:

TS:

singleString = 'London Kings Cross Station';
highlightStart = 3;
highlightLength = 5;

HTML:

<ng-container>{{singleString | slice:0:highlightStart}}</ng-container>
<span class="styled_text">{{singleString | slice:highlightStart:highlightStart+highlightLength}}</span>
<ng-container>{{singleString | slice:highlightStart+highlightLength:singleString.length}}</ng-container>

For multiple highlights:

TS:

textStrings = ['London Kings Cross', 'Bristol Temple Meads'];
stylePositions = [[3,3],[15,3]]; // Start position and length of sections to be styled

HTML: 

<ul>
    <li *ngFor="let textString of textStrings">
        <ng-container *ngFor="let stylePosition of stylePositions; index as i">
  <ng-container *ngIf="i==0">{{textString | slice:0:stylePositions[0][0]}}</ng-container><ng-container *ngIf="i!=0">{{textString | slice:stylePositions[i-1][0]+stylePositions[i-1][1]:stylePositions[i][0]}}</ng-container><span class="styled_text">{{textString | slice:stylePositions[i][0]:stylePositions[i][0]+stylePositions[i][1]}}</span><ng-container *ngIf="i==stylePositions.length-1">{{textString | slice:stylePositions[i][0]+stylePositions[i][1]:textString.length}}</ng-container>
        </ng-container>
    </li>
</ul>

CSS:

.styled_text {
    font-weight: bold;
    font-style: italic;
    color: #ff0000;
}

Method 2 - Inner HTML

A different approach would be to apply the same principle, but use a function to break your string into sections and then pass this to a div in your template using innerHTML - see below and this Stackblitz.

Please note that for this to work, you must also include a custom pipe to declare the HTML as safe for Angular to render with styling. This is also included in the Stackblitz, with more details here.

styleText(string){
    let styledText= '';
    for (let i = 0; i < this.stylePositions.length; i++) { 
        if(i==0){
            styledText+=string.substring(0, this.stylePositions[i][0]);
        } else {
            styledText+=string.substring(this.stylePositions[i-1][0]+this.stylePositions[i-1][1],this.stylePositions[i][0]);
        }

        styledText+='<span style="color:#ff0000">'+string.substring(this.stylePositions[i][0],this.stylePositions[i][0]+this.stylePositions[i][1])+'</span>';

        if(i==this.stylePositions.length-1){
        styledText+=string.substring(this.stylePositions[i][0]+this.stylePositions[i][1],string.length);
        }
    }
    return styledText;
}

Upvotes: 4

Matt Saunders
Matt Saunders

Reputation: 4074

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.

Upvotes: 7

Related Questions