apply show more and show less effect using ngFor, so that it shows the rest of all the text in the list and not just one

user_18548798 0
Viewed 200

I would like to make a show less and show more effect using ngFor so that by clicking the see more button, all the texts are expanded and not just one, I want that if the text exceeds for example 150 characters, I apply a part of the text + " ... " and hide the rest of the texts. When I click the see more button, the rest of ALL texts appear, not just one, and the see more button text is changed to see less.

I haven't made much progress, so I don't have a complete code.

<td *ngFor=" let test of testData?.testDataDescription?.testDataDescriptionCode"> 

     <div #myDivText>
          {{handleBigText(test?.descriptionArea?.summary, myDivText)}}
     </div>

     <span #extend 
     (click)="collapseText( test?.description?.textSumarryDescription, myDivText, extend)">
     <img src="/assets/images/arrow_down.svg"/>
          view more
     </span>
</td>






  public maxLength = 150;
  public resizeText = 3;
  public sizeDescription = this.maxLength;
  public sizeDescriptionDots = this.maxLength + this.resizeText;

  collapseText(text: string, myDivText: Element, extend: Element) {
    const size = text.length - 3;
    if (myDivText.innerHTML.length <= size) {
      myDivText.innerHTML = text;
      extend.innerHTML = `<img src="/assets/images/arrow_up.svg" />
              see less`;
    } else {
      myDivText.innerHTML = `${text.substring(0, this.sizeDescriptionDots)}...`;
      extend.innerHTML = `<img src="/assets/images/arrow_down.svg"/>
             view more`;
    }
  }

  handleBigText(text: string, myDivText: Element) {
    if (text) {
      const textSize = this.maxLength + this.resizeText;
      this.sizeDescription = textSize;
      this.sizeDescriptionDots = textSize;

      return text.length > textSize
        ? `${text.substring(0, textSize)}...`
        : text;
    }

    return '-';
  }
ngfor angular typescript javascript
1 Answers

You're overcomplicating this. No need to actually modify the original text itself.

  1. Let's use Angular's | slice pipe to limit text shown. https://angular.io/api/common/SlicePipe

  2. Lets use *ngIf to conditionally show more or less text.

<hello name="{{ name }}"></hello>
<p> {{ showMore ? text : (text | slice: 0:150) }} <span *ngIf="!showMore">...</span>
  <a href="javascript:;" *ngIf="!showMore" (click)="onShow()">[Show More]</a>
  <a href="javascript:;" *ngIf="showMore" (click)="onShow()">[Show Less]</a>
</p>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  showMore = false;

  onShow () {
    this.showMore = !this.showMore;
  }

  text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
}

Working example: https://stackblitz.com/edit/angular-easy-show-more-6ispwx?file=src%2Fapp%2Fapp.component.html

user_154397330
Related