Angular two way binding between input and lists

Question

I have the following:

<input [(ngModel)]="title"></input>
<div class="list">
    <div *ngFor="let list of lists>
       <div (click)="updateNGModel();"> {{list.Name}}</div>
    </div>
</div>

What I am trying to do is that let say there are 5 lists. When one of them is clicked, I would like to show the clicked value in the input field.

How do I create the two way binding between the value of lists and the input field value?

I am new to the angular and any help would be much appreciated.

Thank you.

score 1 · Accepted Answer · answered Dec 14 '17 at 22:45

you should pass in the list value to your updateNGModel() method, then within that method store the name (or whatever value) to the title property

// component.html
<div *ngFor="let list of lists>
    <div (click)="updateNGModel(list);"> {{list.Name}}</div>
</div>

// component.ts
updateNGModel(list){
    // store the Name value to the title property
    this.title = list.Name;
}

Now since title is 2 way data bound to your input, your input field will be updated.

Angular two way binding between input and lists

1 Answers1