Angular 2 использует селектор пользовательских компонентов в сторонней директиве

Я использую ng2-bootsrap аккордеонная директива.

Он отлично работает с обычным html, используя этот синтаксис:

<accordion>
    <accordion-group heading="Heading 1">
        <div>Quick Search...</div>
    </accordion-group>
</accordion>

Я хотел бы вставить селектор из одного из моих компонентов следующим образом:

<accordion>
    <accordion-group heading="Heading 1">
        <quick-search></quick-search>
    </accordion-group>
</accordion>

Когда я добавляю свой компонент, анализатор просто удаляет селектор и ничего не показывает на его месте. Если бы аккордеон был директивой, которую я создал, я обычно добавлял бы свой компонент (QuickSearchComponent) в список директив следующим образом:

@Component({
   ...
   directives: [QuickSearchComponent]
   ...
})

Но так как это директива третьей стороны. Как заставить директиву распознать его или добавить в аннотацию @Component.directives?