Add see more option to the server data in angular 8

user_8805085 0
Viewed 195

I am facing an issue with my project.

I want to add see more option to a paragraph and that paragraph's data is coming from a server.

I know how to add see more option to HTML paragraph, but I don't know how to add see more option to the data that is coming from the server.

<p>Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas <span id="dots">...</span>
<span id="more">Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas .</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

JavaScript code

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

So you can see above I tried above code for a paragraph and it is working fine for me.

but in my project, the HTML component is as below.

<div  class="col-12 col-lg-12" *ngFor="let post of rec?.attributes?.Postings | filter : searchText | filter:filterText; let i=index">
<div class="col-12 noRightPadding" style="overflow-wrap: break-word;white-space: pre-line;word-break:break-all;
">{{post?.attributes?.Message}} </div>
</div>

you can see the paragraph is coming as post.attributes.Message and I don't have an idea how to add see more option for this if it exceeds more than two lines.

can anyone help me with this?

angular8 angular
3 Answers

Demo You can do it with if condition and create one more property for each element such as post?.attributes?.isMore as default false

   <div  class="col-12 col-lg-12" >
        <div class="col-12 noRightPadding">
           {{ post?.attributes?.Message.length>100 ? post?.attributes?.Message.substring(0,10)+'...': post?.attributes?.Message}} 
            <a *ngIf=" post?.attributes?.Message.length>10"(click)="post?.attributes?.isMore=!post?.attributes?.isMore">{{!post?.attributes?.isMore && post?.attributes?.Message.length>10 ? 'Read More' : 'Read Less' }}</a> </div> 
      </div>
    </div>
user_25762540

You can do something like:

<p class="text-center">{{ post.attributes.Message.length <= 50 ? post.attributes.Message : post.attributes.Message.substring(0, 50) + '...' }}</p>

if your text contain more than 50 characters then it will only display 50 characters.

user_136329970

I strongly recommand you to use word-wrap and text-overflow CSS properties.

Example: https://codepen.io/doliG/pen/oNjrVBK

With angular, the toggle function can simply change a boolean value

class MyComponent {
  showFullText = false;

  toggle() {
    this.showFullText = !this.showFullText;
  }
}

And then in template, something like

<p [class.something]="showFullText">{{ veryLongText }}</p>

Good luck.

user_75920830
Related