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.

LLai · Accepted Answer · 2017-12-14 22:45:25Z

1

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.

answered Dec 14, 2017 at 22:45

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular two way binding between input and lists

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related