CODEWITHSUNDEEP
angularangular2-directives
Abdullah Rasheed
Abdullah Rasheed

Reputation: 3752

Angular 2 use custom component selector in 3rd party directive

I'm using ng2-bootsrap's accordion directive.

It works fine with normal html using this syntax:

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

I would like to insert a selector from one of my components like this:

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

When I add my component, the parser just removes the selector and doesn't show anything in its place. If accordion was a directive that I created, I would normally add my component(QuickSearchComponent) to the list of directives like this:

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

But being that this is a 3rd party Directive. How can make the directive recognize it or add to the @Component.directives annotation?

Upvotes: 1

Views: 503

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657416

directives: [QuickSearchComponent]

is required on the component that contains 

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

and is not necessary in the accordion or accordion-group component.

What is necessary in the accordion-component is an <ng-content> tag where <quck-search> is transcluded to.

If it works with <div>Quick Search...</div> then it should work with <quick-search></quick-search> as well.

The problem is caused by something else.

Upvotes: 2

Related Questions