Angular text box value

Mohan Arumugam

8y963Angular

HOME.COMPONENT.HTML

pushItem = function(value){

this.items.push(value);

}

I am new to Angular

After button clicked values are be listed correctly.

but

I need textbox be empty again.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mahesh Verma8y ago
Accepted answer
Hi Mohan,

You can do the same thing with template reference variable also, for this, put the below code in html file :
<div class="AddItem">
   <input #inputBox1 placeholder="Add Item" class="addtext">
   <button (click) = "pushItem(inputBox1)">ADDbutton>
div>
<ul>
      <li *ngFor="let i of items">
         {{i}}
         <span>xspan>
      li>
ul>
In the above line, pass template reference variable "inputBox1" in the method pushItem(), and then change your logic in ts file, i.e. put the below code in ts file
items = ["angular","react","HTML"];
    pushItem = function(data){
       this.items.push(data.value);
       data.value="";
     }
Mohan Arumugam8y ago
Mahesh Verma

Thank you so much sir
Mahesh Verma8y ago
Hi Mohan,

Actually, you used template reference variable "#inputBox1", which is accessible only template, but after push you want to blank the input box. For this, use two way binding like
<div class="AddItem">
   <input [(ngModel)]="myVal" placeholder="Add Item" class="addtext">
   <button (click) = "pushItem()">ADDbutton>
div>

<ul>
      <li *ngFor="let i of items">
         {{i}}
         <span>xspan>
      li>
ul>
Put this code into HOME.COMPONENT.HTML file, in this I am using "myVal" with ngModel (responsible for 2-way binding), so, it automatically update the value of "myVal" property in ts file. At the time of pushItem(), you don't need to pass this value.
Now, put the below code in your ts file:
myVal:any;
items = ["angular","react","HTML"];

   pushItem = function(){
         this.items.push(this.myVal);
         this.myVal="";   //it clear out your value after add element into list
   }
I hope, it will help you.