jquery getting applied after rendering result in Angular

Question

I am trying to truncate string based on the number of characters of the string and then append ellipsis if number of chars greater than 21.

I have added a truncate class on the div of html using jquery. Everything works fine but when page is getting refreshed, for a second the text is getting display and after that this truncate class is getting applied on it.

Here is my html code:

<span class="truncate">
    <span *ngIf="result.text1">
        {{result.text1 + "," }}
    </span>
    <span *ngIf="result.text2">
        {{result.text2 + "," }}
    </span>
</span>

Here is my jquery code:

    setTimeout(() => {
    jQuery('.truncate').each(function (i) {
        if (jQuery(this).text().length > 21) {
            jQuery(this).text(
                jQuery(this)
                    .text()
                    .substr(0, 21) + '...'
            );
        }
    });

The result I am getting is something like this if text1 and text2 are text1="My name is xyz",

text2="Hello Mr.xyz"

End result : "My name is xyz, hello ..."

I want the jquery to be applied applied before the text gets render on page.

Is there any way so that I can delay the rendering?

Anjs · Accepted Answer · 2021-01-23 08:27:35Z

1

You are using Angular so you can directly use ngClass like this

<span class="truncate">
    <div *ngIf="result.text1" [ngClass]="{'text-ellipsis':result.text1.length > 25}">
        {{result.text1 + "," }} {{result.text1.length > 25}}
    </div>
<div *ngIf="result.text2" [ngClass]="{'text-ellipsis':result.text1.length > 25}>
        {{result.text2 + "," }}
    </div>
</span>

.text-ellipsis {
  white-space: nowrap;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

And If you still want to use your code and just solve the rendering issue, then remove the setTimeout and place your code inside ngAfterViewInit like below. This will update the text after the html page gets loaded.

ngAfterViewInit() {
$(".truncate").each(function(i) {
  if ($(this).text().length > 21) {
    $(this).text(
      $(this)
        .text()
        .substr(0, 21) + "..."
    );
  }
});

}

edited Jan 23, 2021 at 8:27

answered Jan 23, 2021 at 7:43

Anjs

6165 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Flask Diploy Over a year ago

I tried it but again facing same problem where it is displaying for a moment an then ellipsis is getting applied on it.

Anjs Over a year ago

Here I just replaced your jquery variable with $

Anjs Over a year ago

Here you can take a look at the updated code stackblitz.com/edit/angular-jquery-integration-x1drhw?file=app/…

Flask Diploy Over a year ago

tried your both of your solutions but not working in my case. Basically I am getting the result from api and we calling that api on each button select. When we get the response we are assigning it to result and after that this variable is getting displayed on dom. After that truncate logic is working. So the time difference between assigning to the variable and applying truncate logic that variable gets displayed on dom. Basically with your jquery solution still I am getting the text displayed for a moment.

Anjs Over a year ago

Then directly apply the logic in html like this {{(result.text1 && result.text1.length > 21 ? (result.text1.substr(0, 21) + "...") : result.text1) + "," }} This solution is working for me. This is the stackblitz link stackblitz.com/edit/angular-o5ysmr?file=src/app/…

|

Collectives™ on Stack Overflow

jquery getting applied after rendering result in Angular

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related