Angular 2 ng2-auto-completeコンポーネント用のカスタムUIスタイリング

Question

TypeAheadコンポーネントを作成するには、Angular2 ng2-auto-completeコンポーネントを使用しています。私は正しい機能を得ることができました。 これでスタイルを変更したいと思います。意味私は矢印上にアニメーションを追加して、ドロップダウンが表示されたら矢印が反転するようにしたい。

ng2-auto-completeコンポーネントのlist-formatterオプションを使用する必要がありますか？はいの場合、どうすれば使用できますか？私はアニメーションを使用するCSSクラスを使用しようとしましたが、動作しませんでした。

アイコンを追加するだけでも、z-indexはアイコンを前面に表示させません。アイコンは存在しますが、先読みコンポーネントの後ろに隠れていることを意味します。

これは私のHTMLコード私が掲示する問題の

<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel 
    name="event" #event="ngModel" [source]="items" value-property-name=null display-property-name="name" (valueChanged)="onSelect($event)"/> 
<span class="icon-arrow-down"></span> 

Answer 1

ですが、私は<button class="btn dropdown-button"></button>がどのように見えるかを模倣するために、先行入力コンポーネントに表示する外部のアイコンを追加しようとしていました。

だから、最初に<i></i>を使用してから、オーバーレイクラスを追加しました。

私のHTMLは、

<i class="fa fa-lg icon-arrow overlay"></i> 
<input ng2-auto-complete class="form-control" [(ngModel)]="model" ngModel 
    name="typeahead" #typeahead="ngModel" [source]="values" value-property-name=null display-property-name="name" (valueChanged)="onSelect($event)"/> 

CSS、

.overlay{ 
    position: absolute; 
    top: 15px; 
    left: 195px; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    font-size:11px 
}