Change how content is displayed based on screen size in Angular 4

Question

On a larger screen size I have 3 columns of content. On a smaller screen size I am wanting to display the content in a tab control with 3 tabs.

I have this working using the html below. The problem is that if I make changes to the data a component is bound to it does not update the other copy of the component. So if data is changed while the screen is large, then the screen is made small, it switches to tabs correctly, but the data does not display as updated. The actual data object in code is updated fine.

How can I sync the copied components to always display the same? Basically, when one is changed, the other mimics those changes. Alternatively, is there a different/better way to achieve the same goal of displaying content in tabs when the screen is small.

<div fxHide fxShow.gt-sm >
  <div>
    <h3>Column 1</h3>
    <custom-component1 
      [(data)]="data1">
    </custom-component1>
  </div>
  <div>
    <h3>Column 2</h3>
    <custom-component2 
      [(data)]="data2">
    </custom-component2>
  </div>
  <div>
    <h3>Column 3</h3>
    <custom-component3 
      [(data)]="data3">
    </custom-component3>
  </div>
  
  <mat-tab-group fxShow fxHide.gt-sm>
    <mat-tab label="Column 1">
      <div>
        <h3>Column 1</h3>
        <custom-component1 
          [(data)]="data1">
        </custom-component1>
      </div>
    </mat-tab>
    <mat-tab label="Column 2">
      <div>
        <h3>Column 2</h3>
        <custom-component2 
          [(data)]="data2">
        </custom-component2>
      </div>
    </mat-tab>
    <mat-tab label="Column 3">
      <div>
        <h3>Column 3</h3>
        <custom-component3 
          [(data)]="data3">
        </custom-component3>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>

Answer 1

I solved my issue. I found that I was really only having problems keeping radio buttons and check-boxes in sync between the two display types. It turns out there were problems because the radio-button groups were named and it didn't like that there were two groups with the same name.

I didn't need them to be named anyway, so simply removing the names fixed my issue. If you need names I was thinking of adding a GUID to the name that is generated OnInit(). Basically just be careful that you don't have ids and names in your components that have multiple rendered copies because they need to be unique.