title: "See more text" in Angular/PrimeNg
body: <p>Please guide me achieve "see more text" functionality.</p>
  
  <p>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 <code>down arrow</code>, if the description is more than 1000 characters. On click of the <code>down arrow</code> the para will expand and it will show full text and the arrow turns to the <code>up arrow</code>. In other words, toggling. Please guide me achieve this. So far I tried as below but unable to achieve the requirement.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;Description&lt;/div&gt;
  &lt;div&gt;{{details.desc | slice:0:1000}}&lt;/div&gt;
  &lt;div *ngIf="details.desc.length &gt;= 1000"&gt;
    &lt;span class="arrow-down"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  
    border-top: 10px solid #f00;
  }
  </code></pre>