How to show only first 15 characters of text value

Question

text from array [.ts file] is displayed on home.html

I want to show only first 15 characters and then 3 dots ...

This is the code I am trying to use but it is not working

home.html

<ion-content>
  <!--<div class="info col-11"  [innerHtml]="list.dr_describe | safe: 'html'">{{list.q_describe}}</div>-->

  <div class="info col-11" *ngFor="let list of this.dailyreports">
    {{list.name}}
    <br/>
    <span [innerHtml]="list.desc | safe: 'html'">{{list.desc.substring(1,15)}}</span>
  </div>
</ion-content>

Here is the screenshot of my html page:

Answer 1

Try this

  {{ (list.desc.length>15)? (list.desc  | slice:0:15)+'...':(list.desc ) }}

or use custom Pipe is better

@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
  transform(val:string , length?: any):string[] {
    return (val.length>length)? val.slice(0, 15)+'...':val
  }
}

in HTML

{{list.desc | shorten:15 }}