title: Can I Create Nested Angular Component HTML Selectors?
body: <p>Updated: Per Thierry Templier's response:</p>
  
  <p>Below is essentially what I want to do, but unfortunately the inner components aren't rendering. Is there a way to nest components via their HTML selectors like so?</p>
  
  <pre><code>&lt;custom-menu-bar-component (onCustomEvent)="handleEvent($event)"&gt;
      &lt;custom-button-component&gt;&lt;/custom-button-component&gt;
      &lt;custom-dropdown-component&gt;&lt;/custom-dropdown-component&gt;
  &lt;/custom-menu-bar-component&gt;
  </code></pre>
  
  <p>In my chrome debugger, I see only the outer component being rendered:</p>
  
  <pre><code>&lt;custom-menu-bar-component&gt;
      &lt;div class="row"&gt;
          ** Nothing here, where my two inner components should be :(
      &lt;/div&gt;
  &lt;/custom-menu-bar-component&gt;
  </code></pre>
  
  <p>And my components look like this:</p>
  
  <p>CustomMenuBarComponent.ts:</p>
  
  <pre><code>import {Component} from 'angular2/core'
  import {CustomButtonComponent} from './CustomButtonComponent'
  import {CustomDropdownComponent} from './CustomDropdownComponent'
  
  @Component({
      selector: 'custom-menu-bar-component',
      directives: [CustomButtonComponent, CustomDropdownComponent],
      template: `
          &lt;div class="row"&gt;&lt;/div&gt;
      `
  })
  export class CustomMenuBarComponent {
  }
  </code></pre>
  
  <p>CustomButtonComponent.ts:</p>
  
  <pre><code>import {Component, EventEmitter} from 'angular2/core'
  import {CustomEvent} from './CustomEvent'
  
  @Component({
      selector: 'custom-button-component',
      outputs: ['onCustomEvent'],
      template: `
          &lt;button type="button" class="btn btn-light-gray" (click)="onItemClick()"&gt;
          &lt;i class="glyphicon icon-recent_activity dark-green"&gt;&lt;/i&gt;Button&lt;/button&gt;
      `
  })
  export class CustomButtonComponent {
      onCustomEvent: EventEmitter&lt;CustomEvent&gt; = new EventEmitter();
      onItemClick(): void {
          this.onCustomEvent.emit(new CustomEvent("Button Component Clicked"));
      }
  }
  </code></pre>
  
  <p>CustomDropdownComponent is nearly identical to the CustomButtonComponent, but with different text. I'm just trying to get this very simple example working before I start making these components more useful and reusable. </p>
  
  <p>Is this kind of approach possible? I'm trying to make it easy for others to take these components and create more of my custom menu bars with ease and simplicity.</p>