On Click event the textarea field should be empty

Question

I am a very new user of Angualr and currently using Angular 10. I want the textarea field that should be empty after click on the clear button. But this code is not working that I want to do. Could someboday help me. Thanks.

HTM file

<button (click)="ClearField()" type="button">clear field</button> 
<textarea class="form-control  rows=10 cols=50 cstm-textarea" #box (keyup)="OnUpdateTextArea(box.value)">
</textarea>

.ts file

export class AppComponent {
  
  str = '';

  OnUpdateTextArea(value: string) {
    this.str = value;
    console.log("text area value:", this.str);
    
  }

  ClearField() {
    this.str = '';
  }
}

score 0 · Answer 1 · answered Aug 11 '20 at 14:36

0

Believe binding can fix this problem.

<button (click)="ClearField()" type="button">clear field</button> 
<textarea [(ngModel)]="str" class="form-control  rows=10 cols=50 cstm-textarea">
</textarea>

and ts I believe can stay the same.

You should look into one way and two way binding

answered Aug 11 '20 at 14:36

Joseph Hissong

3
4

Thanks for your reply. But it isn't working. Could you please state how i have to handle 'str' in ts file. – Atika.Akmal Aug 12 '20 at 09:31

score 0 · Answer 2 · answered Aug 12 '20 at 10:23

0

The solution of this problem:

<button (click)="ClearField(box)" type="button">clear field</button> 
<textarea class="form-control  rows=10 cols=50 cstm-textarea"  #box (keyup)="OnUpdateTextArea(box.value)">
</textarea>

answered Aug 12 '20 at 10:23

Atika.Akmal

11
1
3

On Click event the textarea field should be empty

2 Answers2