CODEWITHSUNDEEP
javascriptangular
prem kumar
prem kumar

Reputation: 121

truncation of text and 'show more' text

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

Upvotes: 0

Views: 1309

Answers (1)

Barremian
Barremian

Reputation: 31105

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>

Upvotes: 1

Related Questions