CODEWITHSUNDEEP
javascriptangularcsstypescriptprimeng
Anna
Anna

Reputation: 1689

"See more text" in Angular/PrimeNg

Please guide me achieve "see more text" functionality.

I work on angular 4 and primgNg. My page shows a column named "Description". Initially I have to show only 1000 characters in the that column and show a down arrow, if the description is more than 1000 characters. On click of the down arrow the para will expand and it will show full text and the arrow turns to the up arrow. In other words, toggling. Please guide me achieve this. So far I tried as below but unable to achieve the requirement.

HTML

<div>Description</div>
<div>{{details.desc | slice:0:1000}}</div>
<div *ngIf="details.desc.length >= 1000">
  <span class="arrow-down"></span>
</div>

CSS

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-top: 10px solid #f00;
}

Upvotes: 1

Views: 4579

Answers (2)

Mobina Khalilzade
Mobina Khalilzade

Reputation: 57

seeMore is a boolean.

<span>
   {{
     seeMore
     ? project.descriptions
     : project.descriptions.slice(0, -5)
   }}
</span>
<span *ngIf="project.descriptions.length > 5"
      (click)="seeMore = !seeMore">
   {{ !seeMore ? "See More" : "See Less" }}
</span>

Upvotes: 1

Mohammad Hajiaghazadeh
Mohammad Hajiaghazadeh

Reputation: 476

I just created working example based on your code here on StackBlitz.com

but better solution is to make it as directive and reuse.

hope it help.

Upvotes: 5

Related Questions