home.ts

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select';

@Component({
  selector: 'lang-select',
  moduleId: module.id,
  template: `
  <ng-select
      [allowClear]="true"
      [items]="items"
      placeholder="No city selected"></ng-select>
  `,
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, SELECT_DIRECTIVES]
})
class LangSelect {
  items:Array<any> = [
    {
      text: 'Austria',
      children: [
        {id: 54, text: 'Vienna'}
      ]
    },
    {
      text: 'Belgium',
      children: [
        {id: 2, text: 'Antwerp'},
        {id: 9, text: 'Brussels'}
      ]
    }
  ];
}


@Component({
  selector: 'home',
  moduleId: module.id,
  styleUrls: ['./home.css'],
  template: `
      <div class="row">
      <div class="col-lg-offset-2 col-xs-4">
        <lang-select></lang-select>
      </div>
      <div class="col-xs-4">
        <lang-select></lang-select>
      </div>
    </div>
  `,
  directives: [LangSelect]
})
export class HomeCmp {
}