How to Truncate string with toggle in Ionic 5 - ionic-framework

Question

How can I truncate my paragraph to only show a certain amount of words and the have a "show more" link that opens up the rest of the paragraph in the same page?
In my page.ts file I have an array filled with this code:
slides = [
{
paragraph:'a very long long long long paragraph '
},
{
paragraph:'very long long long long paragraph'
},
{
paragraph:'very long long long long paragraph'
}
];
In my HTML file I have this code to show it:
<ion-slides [options]="slideOpts" pager="true">
<ion-slide *ngFor="let slide of slides">
<div>
<ion-card>
<ion-card-content>
<br>
<h4> {{ slide.paragraph }} </h4>
</ion-card-content>
</ion-card>
</div>
</ion-slide>

Answer 1

You can use css trick to resolve this issue
.customStyle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h4 class="customStyle"> abc... </h4>

Answer 2

You could use this library #yellowspot/ng-truncate
Then, in your html:
<p *ngIf="isFull[i] === true">{{slide.paragraph}} <span (click)="toggleMore(i)">.. see less</span></p>
<p *ngIf="isFull[i] === false">{{slide.paragraph | truncate :100: "..."}} <span *ngIf="slide.paragraph.length > 100" (click)="toggleMore(i)">see more</span></p>
In .ts file:
getData(){
for(let i=0; i<this.slides.length; i++){
this.isFull.push(false);
}
}
toggleMore(i){
this.isFull[i] = !this.isFull[i];
}
Hope this helps.