account http-type-ahead

accountHttpTypeAhead.html

<div class="card">
  <div class="card-body">
    <http-type-ahead [service]="accountSearchSelectService"></http-type-ahead>

    <ul class="list-group list-group-compact">
      <li *ngFor="let account of accountSearchSelectService.selected" class="list-group-item flex justify-content-between">
        <div>{{ account?.name }}</div>
        <div (click)="accountSearchSelectService.remove(account)" class="cursor-pointer"><i class="ico ico-delete"></i></div>
      </li>
    </ul>
  </div>
</div>

acountTypeAheadSearch.ts

import { Injectable } from '@angular/core';
import { IAccount, LegacyAccountService } from '@armor/api';
import { AbstractHttpTypeAheadService } from '@armor/brandkit';

@Injectable()
export class AccountSearchSelectService extends AbstractHttpTypeAheadService<IAccount> {
  /**
   * Since accountService.getAccounts() does not have server-side filtering we
   * are going to fetch all of the accounts in the constructor. All functionality,
   * except for the results formatter, is covered for us in `AbstractHttpTypeAheadService`
   */
  constructor(private accountService: LegacyAccountService) {
    super();
    this.placeholder = 'Loading...';
    this.accountService.getAccounts().then((accounts) => {
      this.options = accounts;
      this.placeholder = 'Search Accounts';
    });
  }

  // This value for this key shoudl be unique per item.
  // It is used by `remove` and `isSelected` for identification
  public key: keyof IAccount = 'id';

  // The formats the results for the 'dropdown'
  public formatter(item: IAccount) {
    return item && item.name;
  }
}