Cacher is the code snippet organizer for pro developers

HTML: 

<ng-select class="customDropdwon" typeToSearchText="Please enter 3 or more characters" formControlName="txtAccountSearch" [items]="accountList"
  bindLabel="accountName" [typeahead]="peopleInput$" bindValue="accountId"
  placeholder="Search account by name or id *" [loading]="isLoading" (change)="accountSelected()">
  <ng-template ng-option-tmp let-item="item">
    <small>{{ item.accountName }}</small>
    <small> | {{item.accountId}}</small>
  </ng-template>
</ng-select>

Controller:

peopleInput$ = new Subject<string>();

this.peopleInput$.pipe(
  debounceTime(300),
  tap(() => {
    this.isLoading = true;
  }),
  switchMap(value => value.length > 2 ? this.accountService.getaccountSearchList(value): Observable.of([]) 
    .pipe(
      finalize(() => {
        this.isLoading = false;
      }),
    )
  )
)
.subscribe(accountSearchResults => {this.accountList = accountSearchResults; this.isLoading = false;});

CSS:

::ng-deep .ng-select .ng-spinner-loader {
  border-left: 2px solid #C0054D !important;
}

.ng-select.customDropdwon ::ng-deep .ng-placeholder {
  color: #606060 !important;
}

.ng-select.customDropdwon ::ng-deep .ng-arrow-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.ng-select.customDropdwon ::ng-deep .ng-arrow-wrapper .ng-arrow {
  border-left: 10px solid transparent !important;
  border-right: none !important;
  border-top: 5px solid transparent !important;
  border-image-source: url(/images/new_ui/arrow.png) !important;
  border-image-repeat: stretch !important;
}