title: Create a dropdown component
body: <p>I want to create a dropdown menu using Angular 2, but I'm not sure how to do it in the "Angular 2 way".</p>
  
  <p>I could create a dropdown component that is used like this:</p>
  
  <pre><code>&lt;dropdown&gt;
      &lt;li (click)="action('item 1')"&gt;Item 1&lt;/li&gt;
      &lt;li (click)="action('item 2')"&gt;Item 2&lt;/li&gt;
  &lt;/dropdown&gt;
  </code></pre>
  
  <p>This seems nice, but then the <code>action</code> method needs to be defined on the component that contains the <code>&lt;dropdown&gt;</code> and the <code>&lt;li&gt;</code> elements don't get styles applied from the styles in the <code>&lt;dropdown&gt;</code> component, which is kind of odd.</p>
  
  <p>Another option is to create components that are used like this:</p>
  
  <pre><code>&lt;dropdown&gt;
      &lt;dropdown-item (click)="action('item 1')"&gt;Item 1&lt;/dropdown-item&gt;
      &lt;dropdown-item (click)="action('item 2')"&gt;Item 2&lt;/dropdown-item&gt;
  &lt;dropdown&gt;
  </code></pre>
  
  <p>This is more verbose, the dropdown-item component handles the click action, and the styles of the items get defined by the dropdown-item component as well.</p>
  
  <p>Is there a more canonical way to do this in Angular 2?</p>
  
  <p>Edit: I'm not talking about a custom select input for a form. More like a menu with options, or a right click context menu.</p>