truncation of text and 'show more' text

Question

I am new to angular and I have a textarea(disabled always) and data for textarea will be coming from the backend. I need to truncate the text after some character limit and show ....show more . when a user clicks the textbox it should show reveal the rest of the text. I have figure out the way to truncate the text but I am not able to show the rest of the text. I am providing the stackblitz link below. any help will be appreciated.

stackblitz link

 <textarea disabled rows='10' cols='40'(click)="showmore=!showmore"> {{showmore?text:(text|slice:0:477)+'...show More'}} </textarea>

 text = `They told him don't you ever come around here Don't want to see your face, you better disappear The fire's in their eyes and their words are really clear So beat it, just beat it You better run, you better do what you can Don't want to see no blood, don't be a macho man You want to be tough, better do what you can So beat it, but you want to be bad Just beat it, beat it, beat it, beat it No one wants to be defeated Showin' how funky and strong is your fight It doesn't matter who's wrong or right Just beat it, beat it Just beat it, beat it Just beat it, beat it Just beat it, beat it They're out to get you, better leave while you can Don't want to be a boy, you want to be a man You want to stay alive, better do what you can So beat it, just beat it` showmore:boolean = false

Answer 1

Probably the click event isn't registered in the disabled textarea. Try to wrap it in a div container.

<div (click)="showmore=!showmore">
  <textarea disabled rows='10' cols='40' >
    {{ showmore ? text : (text|slice:0:477) + '...show More' }}
  </textarea>
</div>