Ionic 4, как показать больше / меньше текста?

Question

Мне нужно показать текст, но в 2 строки, но когда пользователь нажимает на кнопку Показать больше, он может видеть весь текст. Это мой код

   <div *ngFor="let x of announcement">
         <ion-card class="group-box">
           <div text-left style="font-size: 16px; font-weight: bold; color: white; top: 10%;position: relative; margin-left: 10px;">
             {{x.announcementTitle}}
           </div>
           <div class="" text-left style="font-size: 16px; font-weight: bold; color: white; top: 25%;position: relative; margin-left: 10px;">
             {{x.announcementDetails}}
           </div>

           <div text-right class="announcement-username">
             {{x.createrName}}
           </div>
         </ion-card>
   </div>

Мне нужно добавить опцию seemore / less в annoucementDetails

Answer 1

Попробуйте так:

Рабочая демоверсия

.html

<div *ngFor="let x of announcement">
    <ion-card class="group-box">
        <div>
            {{x.announcementTitle}}
        </div>
        <div>
            <div *ngIf="!x.showMore">
                {{trimString(x.announcementDetails,100)}}
            </div>
            <div *ngIf="x.showMore">
                {{x.announcementDetails}}
            </div>
            <a (click)="x.showMore = !x.showMore">Show <span [innerHtml]="x.showMore ? 'less' : 'More'">  </span>
            </a>
        </div>

        <div text-right class="announcement-username">
            {{x.createrName}}
        </div>
    </ion-card>
</div>

.ts

 constructor() {
    this.announcement = this.announcement.map(item => ({
      ...item,
      showMore:false,
    }));
  }

  trimString(string, length) {
      return string.length > length ? 
             string.substring(0, length) + '...' :
             string;
  }