Two way Binding in Angular using Select List

Question

I wish to set up two-way binding in Angular v5, specifically using an Angular Material select list.

I basically have the following sample code which is a snippet from a HTML table and assume when rendered on the screen, only two rows will appear, i.e.:

<tr *ngFor="let currentHero of currentHeroes; let in = index-{{in}}">
  <td>
    <mat-form-field>
      <mat-select [(ngModel)]="currentHero.product" name="product">
        <mat-option *ngFor="let product of products" [value]="product">
          {{product}}
        </mat-option>
      </mat-select>
    </mat-form-field>                            
  </td>
</tr>

With the code above, which displays two select drop-down lists over two rows, what I would like to achieve and unsure how to do, is that when the user makes a Product selection from the first select drop-down list on row 1, I would like the same product selection to be reflected in the second select drop-down list on row 2.

I basically want the first select list to also control the second select list, i.e. if I chose "Toaster", then this "Toaster" was also set on row 2 select list.

This is the design that I need to keep with.

bugs · Accepted Answer · 2018-05-01 13:47:09Z

3

You need to use [(value)]="..." on your select element to have two-way binding.

<mat-form-field>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

This way, any selection in one of the elements will be reflected in the other one (demo).

answered May 1, 2018 at 13:47

bugs

15.4k6 gold badges53 silver badges55 bronze badges

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

5 Comments

tonyf Over a year ago

Hi, with you example solution, I updated my code above as I need to use a ngFor with ngModel setup. What I would like is that every pair of selects that I have to be different from one another. Basically, using your example, when I change the option, one one, it's reflected in the second, which is perfect. Now assume I have another pair of selects, I now want to achieve the same select but I don't want it to change the values of the first pair and so on. Hope this makes sense.

LordAlpaca Over a year ago

@tonyf, in that case, you could create an array of size currentHero.length / 2 (so it is half the amount of heroes), and every even element (in % 2 === 0), a new index of the array is used as the model

bugs Over a year ago

Not sure if I fully understood your comment, but I've updated the demo to have different pairs. Is that what you are looking for?

LordAlpaca Over a year ago

Also, just a curiosity, why do you have that situation?

tonyf Over a year ago

@bugs - will take a look.I have a "New" button that creates two select lists against a unique name-number, i.e. pair-01-GROUPA and pair-01-GROUPB and if they press the "New" button again, this will then create another pair but instead, will be pair-02-GROUPA and pair-02-GROUPB so when they make a selection against pair-01-GROUPA or pair-01-GROUPB, the select value will the same. But on the new pair, pair-02-GROUPA and pair-02-GROUPB, this selection will be different and don't want this to change the select values against pair-01-GROUPA and pair-01-GROUPB. Hope this makes sense.

Collectives™ on Stack Overflow

Two way Binding in Angular using Select List

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related