ネストされたAngularコンポーネントのHTMLセレクターを作成できますか？

更新：Thierry Templierの応答による：

以下は基本的に私がやりたいことですが、残念ながら内部コンポーネントはレンダリングされていません。そのようなHTMLセレクターを介してコンポーネントをネストする方法はありますか？

<custom-menu-bar-component (onCustomEvent)="handleEvent($event)">
    <custom-button-component></custom-button-component>
    <custom-dropdown-component></custom-dropdown-component>
</custom-menu-bar-component>

私のChromeデバッガーでは、レンダリングされている外部コンポーネントのみが表示されます。

<custom-menu-bar-component>
    <div class="row">
        ** Nothing here, where my two inner components should be :(
    </div>
</custom-menu-bar-component>

そして、私のコンポーネントは次のようになります。

CustomMenuBarComponent.ts：

import {Component} from 'angular2/core'
import {CustomButtonComponent} from './CustomButtonComponent'
import {CustomDropdownComponent} from './CustomDropdownComponent'

@Component({
    selector: 'custom-menu-bar-component',
    directives: [CustomButtonComponent, CustomDropdownComponent],
    template: `
        <div class="row"></div>
    `
})
export class CustomMenuBarComponent {
}

CustomButtonComponent.ts：

import {Component, EventEmitter} from 'angular2/core'
import {CustomEvent} from './CustomEvent'

@Component({
    selector: 'custom-button-component',
    outputs: ['onCustomEvent'],
    template: `
        <button type="button" class="btn btn-light-gray" (click)="onItemClick()">
        <i class="glyphicon icon-recent_activity dark-green"></i>Button</button>
    `
})
export class CustomButtonComponent {
    onCustomEvent: EventEmitter<CustomEvent> = new EventEmitter();
    onItemClick(): void {
        this.onCustomEvent.emit(new CustomEvent("Button Component Clicked"));
    }
}

CustomDropdownComponentはCustomButtonComponentとほぼ同じですが、テキストが異なります。これらのコンポーネントをより便利で再利用できるようにする前に、この非常に単純な例を機能させようとしています。

このようなアプローチは可能ですか？私は、他の人がこれらのコンポーネントを簡単に利用して、より多くのカスタムメニューバーを簡単かつシンプルに作成できるようにしようとしています。