Select

<flx-select
  label="City"
  placeholder="Search for a city"
  [(ngModel)]="selectedCity"
  [options]="cities"
  [searchable]="true"
  [clearable]="true">
</flx-select>

export class CitySelect {
  selectedCity: string;
  cities = [
    { value: 'ny', label: 'New York' },
    { value: 'la', label: 'Los Angeles' },
    { value: 'chicago', label: 'Chicago' },
    { value: 'houston', label: 'Houston' },
    // ... more cities
  ];
}

<flx-select
  label="User"
  placeholder="Search users"
  [(ngModel)]="selectedUser"
  [options]="users"
  [loading]="isLoading"
  [searchable]="true"
  (search)="searchUsers($event)">
</flx-select>

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

export class UserSelect implements OnInit {
  selectedUser: string;
  users: SelectOption[] = [];
  isLoading = false;
  private searchSubject = new Subject<string>();

  ngOnInit() {
    this.searchSubject.pipe(
      debounceTime(300),
      distinctUntilChanged()
    ).subscribe(query => {
      this.loadUsers(query);
    });
  }

  searchUsers(query: string) {
    this.searchSubject.next(query);
  }

  async loadUsers(query: string) {
    this.isLoading = true;
    const results = await this.userService.search(query);
    this.users = results.map(user => ({
      value: user.id,
      label: user.name
    }));
    this.isLoading = false;
  }
}

<flx-select
  label="Team member"
  [(ngModel)]="selectedMember"
  [options]="members">
  <ng-template #optionTemplate let-option>
    <div class="member-option">
      <img [src]="option.avatar" [alt]="option.label" />
      <div>
        <div class="name">{{ option.label }}</div>
        <div class="role">{{ option.role }}</div>
      </div>
    </div>
  </ng-template>
</flx-select>

export class MemberSelect {
  selectedMember: string;
  members = [
    {
      value: '1',
      label: 'John Doe',
      role: 'Developer',
      avatar: '/avatars/john.jpg'
    },
    {
      value: '2',
      label: 'Jane Smith',
      role: 'Designer',
      avatar: '/avatars/jane.jpg'
    }
  ];
}

<form [formGroup]="profileForm">
  <flx-select
    label="Department"
    formControlName="department"
    [options]="departments"
    [error]="departmentControl.invalid && departmentControl.touched"
    helperText="Select your department">
  </flx-select>
</form>

import { FormBuilder, Validators } from '@angular/forms';

export class ProfileForm {
  profileForm = this.fb.group({
    department: ['', Validators.required]
  });

  departments = [
    { value: 'eng', label: 'Engineering' },
    { value: 'design', label: 'Design' },
    { value: 'marketing', label: 'Marketing' },
    { value: 'sales', label: 'Sales' }
  ];

  get departmentControl() { return this.profileForm.get('department')!; }

  constructor(private fb: FormBuilder) {}
}