CODEWITHSUNDEEP
ionic-frameworkionic5
acv
acv

Reputation: 1

How to Truncate string with toggle in Ionic 5

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>

Upvotes: 0

Views: 2783

Answers (2)

Khanh Le Tran
Khanh Le Tran

Reputation: 900

You can use css trick to resolve this issue 

.customStyle {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}

<h4 class="customStyle"> abc... </h4>

Upvotes: 1

Siti Aisah
Siti Aisah

Reputation: 303

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.

Upvotes: 0

Related Questions