Read more/less "Text Toggle" implementation?

Ionic Framework ionic-v3
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