How to limit in Angular the number of characters in the text by inserting a "Read more" button to see the rest?

Asked

Viewed 402 times

0

To limit in Angular the amount of characters in the text by inserting a "Read more" button to see the rest and when you see everything, the "see more" button will become the "see less" button".

I have the following div:

<div *ngFor="let menssagem of menssagem" class="msg">
  {{menssagem.texto}}
</div>

I wanted this text, when it has for example more than 100 characters, it presents a "see more" button as in Facebook posts, and when expanding the "see less".

angular angular-6

1 answer

0

You will have to try a variation of this code:

@Component({
  selector: 'slice-string-pipe',
  template: `<div>
    <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
    <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
    <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
    <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
  </div>`
})
export class SlicePipeStringComponent {
  str: string = 'abcdefghij';
}

Where is 0:4 for example you will have to use a variable manipulated by the see more button or see less

Angular Documentation

Browser other questions tagged angular angular-6

You are not signed in. Login or sign up in order to post.