Read more/less "Text Toggle" implementation?

Ionic Framework ionic-v3
1

Hi everybody!

how is it possible to implement a text toggle e.g. read more/less like in this post?:

https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html

I found no solution for Ionic 2/Angular 2. I would be glad about the simplest implementation.

Kind regards,
Thomas

2

Here’s something Q&D that should at least get you started, using ng2-truncate:

export class TruncatedTextComponent {
  @Input() text: string;
  @Input() 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>

usage:

<ion-input [(ngModel)]="lorem"></ion-input>
<truncated-text [text]="lorem" limit="20"></truncated-text>
8 Likes
3

It works. Thanks a lot!