How to use Angular slice pipe in innerHTML?

Question

I have a whatsNewDetail.content string which contains html elements:

<span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify;">In nec convallis justo. Quisque egestas mollis nibh non hendrerit. Phasellus tempus sapien in ultricies aliquet. Maecenas nec risus viverra tortor rhoncus venenatis in sit amet enim. Integer id ipsum non leo finibus sagittis in eu velit. Curabitur sed dolor dui. Mauris aliquam magna a ipsum tincidunt tempor vitae sit amet ante. Maecenas pellentesque augue vitae quam faucibus, vel convallis dolor placerat. Pellentesque semper justo a turpis euismod, ac gravida enim suscipit.</span>

Whenever I use the slice pipe, it doesn't display anything. I assume that the html elements is included in the slice.

 <span style="font-size: 13px" [innerHTML]="whatsNewDetail.content | slice:0:15+'...'></span>

What I want to achieve is the text to be sliced like:

In nec convalli...

not

<span style="fo...

How can I use the slice pipe after the text is rendered?

There is no direct way to manipulate the inner text of a innerHTML bound element. You would need to take a convoluted way of accessing the generated DOM using a template reference variable and applying the slice pipe in the controller. Instead it'd be quicker, efficient and elegant to perform that in the backend service that returns this innerHTML snippet. — Barremian
– Barremian, Commented Apr 26, 2021 at 8:05
text-overflow: ellipsis; might be what you are looking for, check out w3schools.com/cssref/css3_pr_text-overflow.asp — godocmat
– godocmat, Commented Apr 26, 2021 at 8:26

Kapitan Teemo · Accepted Answer · 2021-04-26 11:57:01Z

2

This is what I managed to do. I created a hidden element to hold the innerHTML and added a template reference variable named #whatsNew.

<p hidden [innerHTML]="whatsNewDetail.content" #whatsNew></p>

Then I created a function that returns the innerText of an element.

getInnerText(el) {
  return el.innerText;
}

After that I created the element with the slice pipe

<p class="article-content">{{ getInnerText(whatsNew).length > 150 ? (getInnerText(whatsNew) | slice:0:150) +'...' : getInnerText(whatsNew) }}</p>

answered Apr 26, 2021 at 11:57

Kapitan Teemo

2,1641 gold badge14 silver badges26 bronze badges

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

Comments

jesvin palatty · Accepted Answer · 2021-04-26 14:44:36Z

0

One technique i can suggest is -

In Html File =>

<span style="font-size: 13px">
 <span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify;">{{whatsNewDetail.content.substring(0,15)}}...</span>
</span>

In Ts File =>

whatsNewDetail= {content: `In nec convallis justo. Quisque egestas mollis nibh non hendrerit. Phasellus tempus sapien in ultricies aliquet. Maecenas nec risus viverra tortor rhoncus venenatis in sit amet enim. Integer id ipsum non leo finibus sagittis in eu velit. Curabitur sed dolor dui. Mauris aliquam magna a ipsum tincidunt tempor vitae sit amet ante. Maecenas pellentesque augue vitae quam faucibus, vel convallis dolor placerat. Pellentesque semper justo a turpis euismod, ac gravida enim suscipit.`}

This should solve your problem.

Note: In case you meant to expand the text by clicking on the ... use a seperate span for '...' alone and use ngif to expand and contract the span with the text stored in whatsNewDetail.content

answered Apr 26, 2021 at 14:44

jesvin palatty

3833 silver badges10 bronze badges

2 Comments

Kapitan Teemo Over a year ago

This won't work because the value of the 'whatsNewDetail.content' is dynamic. You can format and edit the value. I'm using ngxSummernote.

jesvin palatty Over a year ago

so how did you splice this dynamic string using the pipe you must have sent some dynamic value right send same to the substring method..?@KapitanTeemo

Collectives™ on Stack Overflow

How to use Angular slice pipe in innerHTML?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related