Suche nach Dropdown-Komponente für angular2

Question

Ich bin auf der Suche nach einem Dropdown-Komponente für Angular2 ohne Abhängigkeiten außer Angular2 selbst auswählen. alle die Komponenten, die ich benötige jquery gefunden oder ich habe es zu verwenden, ohne andere Abhängigkeiten als Angular2 selbst

Answer 1

eine benutzerdefinierte Dropdown-Liste erstellen nicht so große Sache ist. Außerdem ist es so leicht wie möglich. Alles, was Sie tun müssen, ist:

2. die Liste Klick sichtbar machen aus den übergebenen Daten eine Liste von Elementen erstellen und wieder auszublenden, wenn ein Listenelement
3. Emit die Daten ausgewählt wird, wenn ein Element ausgewählt

Dies ist im Grunde alles, was Sie brauchen:

@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; 
      } 
     } 

Und Sie verwenden es wie folgt :

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

Hier ist die gesamte plunker

jetzt nur Sie es um Stil müssen und vielleicht die Elementstruktur zu etwas ändern, die zu Ihnen passt.