fix component interaction with sub-components

pdb-js/src/app/limit-by/limit-by.component.html

@@ -1,4 +1,4 @@
-<mat-form-field id="limitBy">
+<mat-form-field class="pdb-form-mid">
   <mat-label>Limit By:</mat-label>
   <mat-select [(value)]="limitBy">
     <mat-option value="NO_LIMIT">no limit</mat-option>
@@ -9,14 +9,13 @@
   </mat-select>
 </mat-form-field>
 
-<mat-form-field id="limit"
+<mat-form-field class="pdb-form-number"
   *ngIf="limitBy !== 'NO_LIMIT'">
   <input 
     matInput 
     type="number" 
     placeholder="Limit" 
     min="1" 
-    value="{{limit}}"
-    
+    [(ngModel)]="limit"
     >
 </mat-form-field>

pdb-js/src/app/limit-by/limit-by.component.scss

@@ -1,9 +0,0 @@
-#limitBy {
-  width: 10em;
-  margin-right: 1ex;
-}
-
-#limit {
-  width: 5em;
-  margin-right: 0ex;
-}

pdb-js/src/app/limit-by/limit-by.component.ts

@@ -1,18 +1,18 @@
-import { Component, OnInit, Input} from '@angular/core';
+import { Component,  Input} from '@angular/core';
+import {FormControl} from '@angular/forms';
 
 @Component({
   selector: 'pdb-limit-by',
   templateUrl: './limit-by.component.html',
   styleUrls: ['./limit-by.component.scss']
 })
-export class LimitByComponent implements OnInit {
+export class LimitByComponent {
 
-  @Input() limit: number;
+  limitBy: string = "NO_LIMIT";
+  
+  limit = 10;
 
-  @Input() limitBy: string;
-
-  constructor() { }
-
-  ngOnInit() {
+  constructor() {
+    
   }
 }