Angular 2 : slicepipe

Question

I am using *ngFor for repeating json array and I want to check text length for {{a.body}}. If its greater than 20 then append tripple period(dot) at end else nothing.

Eg. if my text is "how are you john? Let spend some evening having beer"

I want output to be "how are you john? Le..."

<md-card class="example-card1" *ngFor="let a of data">
  <md-card-header>
    <div md-card-avatar class="example-header-image"></div>
    <md-card-title>{{a.name}}</md-card-title>
    <md-card-subtitle>{{a.email}}</md-card-subtitle>
  </md-card-header>
  <img md-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <md-card-content>
    <p>
      {{a.body}}
    </p>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>

It may helps you: https://stackoverflow.com/questions/44669340/how-to-truncate-text-in-angular2 — Ketan Akbari, Sep 23 '17 at 08:31

Dawlatzai Ghousi · Accepted Answer · 2017-09-23T09:03:44.210

You should simply write your code like this:

<md-card class="example-card1" *ngFor="let a of data">
  <md-card-header>
    <div md-card-avatar class="example-header-image"></div>
    <md-card-title>{{a.name}}</md-card-title>
    <md-card-subtitle>{{a.email}}</md-card-subtitle>
  </md-card-header>
  <img md-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <md-card-content>
    <p>
      {{ a.body.length > 20 ? a.body.substring(0,20) + ' ...' : a.body }}
    </p>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>

Angular 2 : slicepipe

1 Answers1