fix component interaction with sub-components

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -35,10 +35,7 @@
         </mat-select>
       </mat-form-field>
       
-      <pdb-limit-by
-        [(limitBy)]="limitBy"
-        [limit]="limit"
-      ></pdb-limit-by>
+      <pdb-limit-by #limitbycomponent></pdb-limit-by>
       
       <mat-form-field>
         <mat-label>Y-Axis:</mat-label>
@@ -48,11 +45,7 @@
         </mat-select>
       </mat-form-field>
       
-     <pdb-y-axis-range 
-      [(yAxisUnit)]="yAxisUnit"
-      [(minYValue)]="minYValue"
-      [(maxYValue)]="maxYValue"
-     ></pdb-y-axis-range>
+     <pdb-y-axis-range #yAxisRangeComponent></pdb-y-axis-range>
      
      
      <mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
@@ -82,7 +75,7 @@
           mat-button
           matTooltip="Create Gallery"
           (click)="plot()"
-          [disabled]="this.splitBy == null">
+          [disabled]="this.splitBy.value == null">
           <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
           Gallery
         </button>