title: Angular 2 - display one component as drop down in another and grabbing the selected value in parent component
body: <p>This is my very first Angular 2 project. I created a component (category) that would pull a list of categories from a service stack API and show as a dropdown like this:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select (change)="onSelect($event.target.value)" [(ngModel)]="selectedCategory.Id"&gt;
      &lt;option *ngFor="let category of categoriesToDisplay" 
              value={{category.Id}}&gt;{{category.Name}}
      &lt;/option&gt;
  &lt;/select&gt;
  Selected Category is: {{selectedCategory.Id}} and Name is {{selectedCategory.Name}}</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have another component (AddExpense) which is a form, where the user can add in the amount, category and hit submit that would POST to another endpoint. For AddExpense component, this is how the .html looks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="expense" (ngSubmit)="fileExpense($event)"&gt;
      Spent &lt;input type="number" formControlName="amt" /&gt; 
      for &lt;input type="text" formControlName="name" /&gt; 
      on &lt;input type="date" formControlName="transdate" /&gt; 
      and file it under category &lt;show-category&gt;&lt;/show-category&gt;
      &lt;button type="submit"&gt;Add Expense&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is how do I figure out which category from the drop down was selected in the add expense form, when the drop down itself is rendered via the show-category component and pass it on as a form control item for add-expense component's .ts to use? </p>
  
  <p>I might be needing to use the Input and output decorator, but not sure how to nab that particular item thats selected in the dropdown and pass it on as input to the add expense component.</p>