How to sync pair of radio buttons in Angular4

Question

I want to sync two or more pair of radio buttons in Angular4. I want both to sync default input buttons and Angular Material radio buttons.

These are input radio button

<table style="width:100%">
<td>
    <input type="radio" name="Breakfast">
    <input type="radio" name="Breakfast">
</td>

<td>
    <input type="radio" name="Lunch" >
    <input type="radio" name="Lunch" >
</td>
</table>

And These are Angular Material Radio

<md-radio-group>
  <md-radio-button value="1">Option 1</md-radio-button>
  <md-radio-button value="2">Option 2</md-radio-button>
</md-radio-group>
<md-radio-group>
  <md-radio-button value="3">Option 3</md-radio-button>
  <md-radio-button value="4">Option 4</md-radio-button>
</md-radio-group>

For Example:- jsFiddle

Answer 1

You can use the (change) event from Angular to bind a method when the value is changed. I used this on the inputs to know when any of them changed value : (change)="onChange1($event.target.value)"

Here is a plunkr showing the result : https://plnkr.co/edit/20igbMdRaY5QE6RtSr1a?p=preview

You can then bind properties with NgModel to bind the two of them together.