angular - looking for dropdown component for angular2 -
i'm looking dropdown select component angular2 without dependencies other angular2 itself. component found require jquery or have use without dependencies other angular2 itself
creating custom dropdown isn't big deal. plus it's 'light-weight' can get. need is:
- create list of elements out of passed data
- make list visible on click , hide again when list element selected
- emit data when element selected
this need:
@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"> shown when nothing 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; } }
and use this:
<custom-select [(selected)]="myitem" [options]="alloptions"></custom-select>
here entire plunker
now need style , maybe change element structure fits you.
Comments
Post a Comment