angular2のドロップダウンコンポーネントを探しています

Question

私は、Angular2自体のコンポーネントではなく、Angular2のドロップダウン選択コンポーネントを探しています。 jqueryが必要なすべてのコンポーネント、またはAngular2以外の依存関係なしに使用する必要があります

Answer 1

カスタムドロップダウンを作成することはそれほど重要ではありません。それだけでなく、あなたが得ることができるように '軽量'です。あなたがやらなければならないことは、次のとおりです。

1. が
2. はクリックでリストを可視作る渡されたデータのうち、要素のリストを作成し、リスト要素が選択されているときとき
3. はデータを放ち、再びそれを隠します要素が

を選択されているこれは、基本的にはあなたが必要なものがすべてです：

@Component({ 
     selector: 'custom-select', 
     template: ` 
      <div class="selected" (click)="openClose()"> 
       <div class="when-selected" *ngIf="selected"> 
        <span>{{selected.title}}</span> 
        <img [src]="selected.img" /> 
       </div> 
       <div class="placeholder" *ngIf="!selected"> 
        This is shown when nothing is selected 
       </div> 
      </div> 
      <ul class="select" [hidden]="closed"> 
       <li *ngFor="let o of options" (click)="select(o)"> 
        <span>{{o.title}}</span> 
        <img [src]="o.img" /> 
       </li> 
      </ul> 
      ` 
     }) 

     export class CustomSelect { 
      @Input() options: any; 

      @Input() selected: any; 
      @Output() selectedChange: EventEmitter<any> = new EventEmitter(); 

      closed: boolean = true; 

      select(option: any): void { 
       this.selected = option; 
       this.selectedChange.emit(option); 
       this.openClose(); 
      } 

      openClose(): void { 
       this.closed = !this.closed; 
      } 
     } 

そして、あなたはこのようにそれを使用します：

<custom-select [(selected)]="myItem" [options]="allOptions"></custom-select> 

は、ここで全体plunker

は今、あなたはそれだけのスタイルと多分あなたに合ったものに素子構造を変更する必要があります。