user944513 user944513 - 1 year ago 125
AngularJS Question

how to clear input field after pushing item on array?

I made a simple example of angular 2. I added item in an array. When user types anything and press the button, it is added into the array and get displayed in the list .

I am facing two issues

  • 1 ) how to clear input field after pusing to array ?

  • 2 ) How angular 2 works ? As in document Angular 2 remove watches .So
    when item is added in array .how template show updated list .how ?

    is it watching the model of list ?

Here is my plunker code

<ion-navbar *navbar>
Ionic 2

<ion-content class="has-header">
<ion-list style="border:2px solid grey;height:500px">
<ion-item *ngFor="#item of Todo">
<label class="item item-input">
<span class="input-label" >Add Todo</span>
<input type="text" #todo placeholder="Add todo" >

<ion-footer-bar (click)="addItem(todo.value)">

<h1 class="title" style='color:red'>Add Todo!</h1>


Answer Source

You can clear the input fields by doing the following things.


previous code

<ion-footer-bar (click)="addItem(todo.value)">

  <h1 class="title" style='color:red'>Add Todo!</h1>


changed code

<ion-footer-bar (click)="addItem(todo)">

  <h1 class="title" style='color:red'>Add Todo!</h1>


Modify the addItem function in home.ts like below.


Hope this gives you a solution for the problem you faced. There are so many other ways too. Since you get the value from the id, I have given the solution based on that.

updated plunker code below

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download