Create a dropdown component

Question

I want to create a dropdown menu using Angular 2, but I'm not sure how to do it in the "Angular 2 way".

I could create a dropdown component that is used like this:

<dropdown>     <li (click)="action('item 1')">Item 1</li>     <li (click)="action('item 2')">Item 2</li> </dropdown> 

This seems nice, but then the action method needs to be defined on the component that contains the <dropdown> and the <li> elements don't get styles applied from the styles in the <dropdown> component, which is kind of odd.

Another option is to create components that are used like this:

<dropdown>     <dropdown-item (click)="action('item 1')">Item 1</dropdown-item>     <dropdown-item (click)="action('item 2')">Item 2</dropdown-item> <dropdown> 

This is more verbose, the dropdown-item component handles the click action, and the styles of the items get defined by the dropdown-item component as well.

Is there a more canonical way to do this in Angular 2?

Edit: I'm not talking about a custom select input for a form. More like a menu with options, or a right click context menu.

Answer 1

I would say that it depends on what you want to do.

If your dropdown is a component for a form that manages a state, I would leverage the two-way binding of Angular2. For this, I would use two attributes: an input one to get the associated object and an output one to notify when the state changes.

Here is a sample:

export class DropdownValue {   value:string;   label:string;    constructor(value:string,label:string) {     this.value = value;     this.label = label;   } }  @Component({   selector: 'dropdown',   template: `     <ul>       <li *ngFor="let value of values" (click)="select(value.value)">{{value.label}}</li>     </ul>   ` }) export class DropdownComponent {   @Input()   values: DropdownValue[];    @Input()   value: string[];    @Output()   valueChange: EventEmitter;    constructor(private elementRef:ElementRef) {     this.valueChange = new EventEmitter();   }    select(value) {     this.valueChange.emit(value);   } } 

This allows you to use it this way:

<dropdown [values]="dropdownValues" [(value)]="value"></dropdown> 

You can build your dropdown within the component, apply styles and manage selections internally.

Edit

You can notice that you can either simply leverage a custom event in your component to trigger the selection of a dropdown. So the component would now be something like this:

export class DropdownValue {   value:string;   label:string;    constructor(value:string,label:string) {     this.value = value;     this.label = label;   } }  @Component({   selector: 'dropdown',   template: `     <ul>       <li *ngFor="let value of values" (click)="selectItem(value.value)">{{value.label}}</li>     </ul>   ` }) export class DropdownComponent {   @Input()   values: DropdownValue[];    @Output()   select: EventEmitter;    constructor() {     this.select = new EventEmitter();   }    selectItem(value) {     this.select.emit(value);   } } 

Then you can use the component like this:

<dropdown [values]="dropdownValues" (select)="action($event.value)"></dropdown> 

Notice that the action method is the one of the parent component (not the dropdown one).