Ionic v3 reed more/less - ionic-framework

Question

I need help.. How can I show more words if something is longer than 20 characters?
<ion-list no-padding no-border no-margin>
<ion-item *ngFor="let item of items | async | reverse">
<ion-card no-padding no-border>
<img [src]="item.url" />
<ion-row>
<ion-item ion-start class="font">{{item.descrizione}}</ion-item>
</ion-row>
</ion-item>
</ion-list>
Now if {{item.descrizione}} is too long it simply doesn't show more. I thought that *ngIf {{item-descrizione.length}} > 20 could solve my problem but I don't know how to continue with show more/less text.
Thank you!

Answer 1

What about using pipes? This is something what I have done.
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'truncate'
})
export class TruncatePipe {
transform(value: string, args: string[]) : string {
let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
let trail = args.length > 1 ? args[1] : '...';
return value.length > limit ? value.substring(0, limit) + trail : value;
}
}
and Component class and template goes something like this
export class TruncatedTextComponent {
limit: number = 40;
truncating = true;
}
<div *ngIf="text">
<div *ngIf="text.length <= limit">{{text}}</div>
<div *ngIf="truncating && text.length > limit">
{{text | truncate : limit}}
<button ion-button (click)="truncating = false">show more</button>
</div>
<div *ngIf="!truncating && text.length > limit">
{{text}}
<button ion-button (click)="truncating = true">show less</button>
</div>
</div>