angular - 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).