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;
}

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;
}

• javascript
• angular
• css
• typescript
• primeng

Share Improve this question Follow asked Sep 11, 2018 at 11:13 AnnaAnna 1,70988 gold badges4040 silver badges6868 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

hope it help.

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>