ng2-encrm-components/components/select/en-select.component.ts

angular 2 components

import { Component, OnInit, EventEmitter, ElementRef, Input, Output } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

import { IEnSelectListItem } from './en-select-list-item.interface';
import { OffClickDirective } from './../directives';


const noop = () => {
};


@Component({
  selector: 'en-select',
  template: require('./en-select.component.html')
})
export class EnSelectComponent implements OnInit {
  private active: boolean = false;
  private selectedOption: IEnSelectListItem;
  private selectedSuboption: IEnSelectListItem;


  @Input() options: IEnSelectListItem[];
  @Input() placeholder: string;
  @Input() label: string;

  public element: ElementRef;

  public constructor(element: ElementRef) {
    this.element = element;
    this.clickedOutside = this.clickedOutside.bind(this);
  }

  ngOnInit() {
  }
  private _close(){
    if(this.active) {
      this.active = false;
    }
  }
  public clickedOutside():void  {
    this._close();
  }
  public selectOption(o: IEnSelectListItem) {
    this.selectedOption = o;
    this.selectedSuboption = null;
    this._close();
  }

  public selectSuboption(o: IEnSelectListItem, so: IEnSelectListItem) {
    this.selectedOption = o;
    this.selectedSuboption = so;
    this._close();
  }

  public toggleOpen(): void {
    this.active = !this.active;
  }
}