title: Pass data from child to parent component Angular2 (reactive and template driven combined)
body: <p>being very new to Angular 2 ( and Angular in general ) , I've encountered a situation with my colleague where he decided to go for the template driven approach and me for the reactive driven approach. We've both created components. His being a search product component and mine being a credidcard component.</p>
  
  <p><strong>What does it do and the wish</strong></p>
  
  <p>From a searchbox if you select a creditcard from the dropdownbox my component will be rendered(and validated when a number is being inserted). </p>
  
  <p>I wish to bind the data from my creditcard component ( being the child ) to the model of the SearchProductModel that he defined. 
  I saw something similar which resembles my problem a bit here is the post (<a href="https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2">Pass data from child to parent component Angular2</a>). </p>
  
  <p>These are the components and templates</p>
  
  <p><em>creditcard.component.ts</em></p>
  
  <pre><code>@Component({
  selector:'creditcard',
  templateUrl:'./app/creditcard/creditcard.component.html' 
  })
  
  export class CreditcardComponent {
  creditForm: FormGroup 
  
  ccnumber = new FormControl('', [Validators.required, validateCreditcard]);
  
  constructor(fb:FormBuilder){
  this.creditForm = fb.group({"ccnumber":this.ccnumber})
  }
  </code></pre>
  
  <p><em>search-product.component.ts</em> </p>
  
  <pre><code>    @Component({
      selector:'search-product',
      templateUrl:'./app/search/search-product.component.html' 
      })
  
      export class SearchProductComponent{
  products: Product[]
  model = new SearchProductModel();
  searchResult:string;
  
  constructor(private searchProductService: SearchProductService){}
  
  ngOnInit(): void {
  this.searchProductService.getProducts().subscribe(products =&gt; this.products = products, error =&gt; console.log(error));
  }
  
  onSubmit(): void {
  this.searchProductService.searchProduct(this.model).subscribe(result =&gt; this.searchResult = result, 
  error =&gt; console.log(error));;
  }
  </code></pre>
  
  <p><em>search-product.component.html</em></p>
  
  <pre><code>&lt;form (ngSubmit)="onSubmit()" #searchForm="ngForm" autocomplete="off"&gt;
  &lt;p&gt;
  &lt;md-select placeholder="Product (optioneel)" [(ngModel)]="model.productId" name="product-id" id="product" style="width:250px"&gt;
   &lt;md-option *ngFor="let product of products" [value]="product.Id"&gt;{{product.Name}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;/p&gt;
  
  &lt;div [ngSwitch]="model.productId"&gt;
   &lt;p *ngSwitchCase="1"&gt;
  &lt;creditcard&gt;&lt;/creditcard&gt;
  &lt;/p&gt;
  &lt;p *ngSwitchDefault&gt;
  &lt;md-input-container style="width: 250px"&gt;
  &lt;input mdInput [(ngModel)]="model.productNumber" name="product-number" id="product-number" required/&gt;
  &lt;md-error&gt;productnumber required&lt;/md-error&gt;
  &lt;/md-input-container&gt;
  
  &lt;button md-button type="submit" id="btn-zoek"&gt;Search&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>creditcard.component.html</em></p>
  
  <pre><code>&lt;form [formGroup]="creditcardForm"&gt;
  &lt;div class="form-group"&gt;
  &lt;md-input-container&gt;
   &lt;input mdInput formControlname="creditcardnumber" id="creditcardnumber" name="creditcardnumber"/&gt;
  &lt;div *ngIf="creditForm.get('creditcardnumber').dirty &amp;&amp; creditcardForm.get('creditcardnumber').hasError('validCreditcard')"&gt;Not correct creditcard&lt;/div&gt;
  &lt;/md-input-container&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>As I understand it, the mixed template driven and reactive approach is not advisable so I will be refactoring this in the future. But for now I wonder how I can make it possible for my creditcard input to get into his model.productId ( see the code). 
  Bear with me, I'm new in this and I'm just having a hard time wrapping my head around it.</p>
  
  <p>Help very much appreciated. </p>