0

Como limitar em Angular a quantidade de caracteres no texto inserindo um botão "Ler mais" para ver o restante e ao visualizar tudo, o botão "ver mais" se tornará o botão "ver menos".

Tenho a seguinte div:

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

Queria que esse texto, ao ter por exemplo mais de 100 caracteres, ele apresentasse um botão "ver mais" como nas publicações do Facebook, e ao expandir apareça o botão "ver menos".

1 Resposta 1

0

Você vai ter que tentar uma variação desse código:

@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';
}

Onde está 0:4 por exemplo você vai ter que utilizar uma variável manipulada pelo botão de ver mais ou ver menos

Documentação do Angular

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .