Angular 2 dropdown directive

Question

I can find lots of Q&As on dropdown components that have the content dynamically created, something like this: <dropdown (items)="some.items" [click]="doSomething($event)" etc... />

I need a more generic and reusable directive that would allow the dropdown to contain any logic / template. Something like:

<dropdown>
   <button class="dropdown-toggle">Toggle Dropdown!</button>
   <something class="dropdown-content">This is the dropdown content...</button>
</dropdown>

The directive needs to provide the logic to handle element hide / show toggle and document click (not on the element) to hide the dropdown. What the best way to tackle this? All the Angular 2 stuff I have done is component this their own views...

what's wrong with the template instruction of the @component declaration? — Sebas
– Sebas, Commented Jan 16, 2017 at 13:28

seidme · Accepted Answer · 2017-01-16 13:26:29Z

1

You can use a Content Projection (Angular 1 Transclusion) for that purpose:

<dropdown>
   <h1>This is a Content Projection!</h1>
</dropdown>

And in the template of the DropdownComponent:

<div class="dropdown">
    <ng-content></ng-content>

    <p>Beside the projected content, dropdown can have its own content..</p>
</div>

The result will be the following:

<h1>This is a Content Projection!</h1>
<p>Beside the projected content, dropdown can have its own content..</p>

edited Jan 16, 2017 at 13:26

answered Jan 16, 2017 at 13:10

seidme

13.1k5 gold badges39 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nick Over a year ago

Exactly what I'm looking for, thanks! It's explained here very well: scotch.io/tutorials/angular-2-transclusion-using-ng-content

Collectives™ on Stack Overflow

Angular 2 dropdown directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related