See more for long text using Angular 4

Question

Is there any way to slice a text and limit it with 40 words for example and after "see more" link the whole text will displayed.

I tried ng2-truncate and read-more-directive and ng-text-truncate-2 but it doesn't work with Angular 4.

Please check https://stackoverflow.com/questions/44669340/how-to-truncate-text-in-angular2 . You can use pipe to show truncated text, when user click on more than show the full text to the user. — Ajay, Jan 02 '18 at 07:16
I checked it before, but there is no 'more' option with this way — Roula Halabi, Jan 02 '18 at 07:24

score 4 · Answer 1 · answered Dec 27 '19 at 09:36

I would do in a simpler way:

read.more.component.html:

<p class="see-more">
    {{ seeMore ? text : text.substr(0, max) }}
    <ng-container *ngIf="text.length > max">...
        <a class="text-primary" (click)="seeMore = !seeMore;">See {{ seeMore ? 'less' : 'more'}}</a>
    </ng-container>
</p>

read.more.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-read-more',
  templateUrl: './read-more.component.html',
  styleUrls: ['./read-more.component.scss']
})
export class ReadMoreComponent {

  @Input() text: string;
  @Input() max: number = 150;

  seeMore: boolean = false;

  constructor() { }
}

When I use this method on a row in the table the whole tables with the description triggers the See More. How can I send an index to make it only trigger on one row. — Sachini Witharana, Jun 07 '21 at 06:58

score 2 · Answer 2 · answered Jan 02 '18 at 10:09

You can use Component. Ex: <app-read-more [text]="yourText"></app-read-more>

import { Component, Input, OnChanges } from '@angular/core';

    @Component({
        selector: 'app-read-more',
        template: `<p class='break-wrap mb0' style='white-space: pre-wrap;' [hidden]='fullText' [innerHTML]='rmTextShort'></p><p class='break-wrap mb5' style='white-space: pre-wrap' [hidden]='!fullText' [innerHTML]='rmTextFull'></p><p class='mb0'><small><a href='javascript:;' class='text-primary' (click)='readMore(true)' [hidden]='!showMore'>{{'more' | translate}}</a><a href='javascript:;' (click)='readMore(false)' class='text-primary' [hidden]='!showLess'>{{'less' | translate}}</a></small></p>`,
    })
    export class ReadMoreComponent implements OnChanges {
        @Input() text: string;
        fullText = true;
        showMore = false;
        showLess = false;
        rmTextShort = ''; 
        rmTextFull = ''; 
        inputWords = [];
        constructor() {
        }

        readMore(flag) {
            if (flag) {
                this.showMore = false;
                this.fullText = true;
                this.rmTextFull = this.text;
                this.showLess = true;
            } else {
                this.showLess = false;
                this.showMore = true;
                this.fullText = false;
            }
        }

        ngOnChanges () {
            this.rmTextShort = this.text;
            this.rmTextFull = this.text;
            this.inputWords = this.text.split(' ');
            if (this.inputWords.length > 30) {
                this.fullText = false;
                this.showMore = true;
                this.rmTextShort = this.inputWords.slice(0, 30).join(' ') + '...';
            } else {
                if (this.rmTextShort.length > 300) {
                    this.fullText = false;
                    this.showMore = true;
                    this.rmTextShort = this.rmTextShort.substr(0, 300) + '...'
                } else {
                    const lineBreaks = this.rmTextShort.split(/\n/g)
                    if (lineBreaks.length > 4) {
                        this.fullText = false
                        this.showMore = true
                        this.rmTextShort = lineBreaks.slice(0, 4).join('\n') + '...'
                    }
                }
            }
        }
    }

See more for long text using Angular 4

2 Answers2