Angular Autocomplete Component

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AutocompleteDirective, AutocompleteOption, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete',
  imports: [AutocompleteDirective, ReactiveFormsModule, FormLabelDirective],
  templateUrl: './autocomplete.component.html'
})
export class AutocompleteComponent {
  readonly options: AutocompleteOption[] = ['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js'];
}

import { Component } from '@angular/core';
import { AutocompleteDirective, AutocompleteOption, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-2',
  imports: [AutocompleteDirective, FormLabelDirective],
  templateUrl: './autocomplete-2.component.html'
})
export class Autocomplete2Component {
  readonly options: AutocompleteOption[] = [
    {
      label: 'Angular',
      value: 1
    },
    {
      label: 'Bootstrap',
      value: 2
    },
    {
      label: 'Next.js',
      value: 3
    },
    {
      label: 'React.js',
      value: 4
    },
    {
      label: 'Vue.js',
      value: 5
    }
  ];
}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-3',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-3.component.html'
})
export class Autocomplete3Component {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-default-search',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-default-search.component.html'
})
export class AutocompleteDefaultSearchComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-restricted-selection',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-restricted-selection.component.html'
})
export class AutocompleteRestrictedSelectionComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-show-hints',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-show-hints.component.html'
})
export class AutocompleteShowHintsComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-highlight-matching-text',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-highlight-matching-text.component.html'
})
export class AutocompleteHighlightMatchingTextComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-validation-states',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-validation-states.component.html',
  styleUrl: './autocomplete-validation-states.component.scss'
})
export class AutocompleteValidationStatesComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-disabled-state',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-disabled-state.component.html'
})
export class AutocompleteDisabledStateComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-read-only-state',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-read-only-state.component.html'
})
export class AutocompleteReadOnlyStateComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-sizing',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-sizing.component.html',
  styleUrl: './autocomplete-sizing.component.scss'
})
export class AutocompleteSizingComponent {}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-cleaner-functionality',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-cleaner-functionality.component.html'
})
export class AutocompleteCleanerFunctionalityComponent {}

import { Component, signal } from '@angular/core';
import { AutocompleteDirective, ButtonDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-dropdown-visibility',
  imports: [AutocompleteDirective, ButtonDirective],
  templateUrl: './autocomplete-dropdown-visibility.component.html'
})
export class AutocompleteDropdownVisibilityComponent {
  readonly visible = signal(false);
}

import { Component, signal } from '@angular/core';
import { AutocompleteDirective, ColComponent, FormLabelDirective, RowComponent } from '@coreui/angular';
import { IconDirective } from '@coreui/icons-angular';
import { cifDe, cifEs, cifGb, cifPl, cifUs } from '@coreui/icons';

@Component({
  selector: 'docs-autocomplete-custom-templates',
  imports: [AutocompleteDirective, ColComponent, FormLabelDirective, RowComponent, IconDirective],
  templateUrl: './autocomplete-custom-templates.component.html'
})
export class AutocompleteCustomTemplatesComponent {
  readonly flags: Record<string, string[]> = {
    de: cifDe,
    es: cifEs,
    gb: cifGb,
    pl: cifPl,
    us: cifUs
  };

  readonly cities = [
    {
      label: 'Germany',
      value: 'de',
      options: [
        {
          label: 'Saarbrücken'
        },
        {
          label: 'Berlin'
        },
        {
          label: 'München'
        }
      ]
    },
    {
      label: 'Spain',
      value: 'es',
      options: [
        {
          label: 'Madrid'
        },
        {
          label: 'Alicante'
        },
        {
          label: 'Huesca'
        }
      ]
    },
    {
      label: 'United Kingdom',
      value: 'gb',
      options: [
        {
          label: 'Liverpool'
        },
        {
          label: 'London'
        },
        {
          label: 'Manchester'
        }
      ]
    },
    {
      label: 'United States',
      value: 'us',
      options: [
        {
          label: 'Austin'
        },
        {
          label: 'Chicago'
        },
        {
          label: 'Los Angeles'
        }
      ]
    }
  ];

  readonly countries = this.cities.map(({ label, value }) => ({ label, value }));

  readonly filteredCities = signal(this.cities);

  handleOptionChange(country: any) {
    if (country === null) {
      this.filteredCities.set(this.cities);
      return;
    }
    const match = this.cities.find((c) => c.value === country?.value);
    this.filteredCities.set(match ? [match] : this.cities);
  }
}

import { JsonPipe } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import { Component, computed, inject, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import {
  AutocompleteDirective,
  AutocompleteOption,
  BadgeComponent,
  ButtonDirective,
  ColComponent,
  FormLabelDirective,
  RowComponent
} from '@coreui/angular';
import { UsersService } from './users.service';
import { distinctUntilChanged, map } from 'rxjs/operators';

@Component({
  selector: 'docs-autocomplete-implementation',
  imports: [
    AutocompleteDirective,
    BadgeComponent,
    FormLabelDirective,
    JsonPipe,
    ReactiveFormsModule,
    ButtonDirective,
    RowComponent,
    ColComponent
  ],
  templateUrl: './autocomplete-implementation.component.html'
})
export class AutocompleteImplementationComponent {
  readonly #usersService = inject(UsersService);

  protected formGroup = new FormGroup({
    userName: new FormControl<string>('Barbara')
  });

  readonly searchName = signal<string | undefined>(this.formGroup.value.userName ?? undefined);

  #typedName = '';

  readonly usersResource = this.#usersService.getUsers(this.searchName);

  #users: AutocompleteOption[] = [];

  readonly users = computed(() => {
    const usersResource = this.usersResource;
    if (!usersResource.isLoading()) {
      const rawUsers = usersResource?.value()?.records?.map((user) => user.first_name as AutocompleteOption) ?? [];
      this.#users = [...new Set(rawUsers)];
    }
    return this.#users;
  });
  readonly error = computed(() => this.usersResource?.error() as HttpErrorResponse);
  readonly loading = computed(() => this.usersResource?.isLoading());

  // readonly #usersEffect = effect(() => {
  //   console.log('Users:', this.users());
  //   console.log('Loading:', this.loading());
  //   console.log('Error:', this.error());
  // });

  protected handleOptionChange($event: AutocompleteOption | null) {
    console.log('* handleOptionChange', $event);
    if ($event) {
      this.#typedName = '';
      this.searchName.set(typeof $event === 'string' ? $event : $event.label);
    } else {
      this.searchName.set(this.#typedName);
    }
  }

  protected handleValueChange($event: string | number | null | undefined) {
    console.log('* handleValueChange', $event);
  }

  protected handleInputChange($event: string) {
    console.log('* handleInputChange', $event);
    this.#typedName = $event;
    this.searchName.set($event);
  }

  protected changeValue() {
    const findName = 'Markus';
    this.searchName.set(findName);
    this.formGroup.get('userName')?.setValue(findName);
  }

  protected resetForm() {
    this.#typedName = '';
    this.searchName.set(undefined);
    this.formGroup.reset();
  }

  constructor() {
    this.formGroup.valueChanges
      .pipe(
        map((value) => value.userName),
        distinctUntilChanged()
      )
      .subscribe((value) => {
        console.log('@ valueChange', value);
      });
  }
}

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-virtual-scroller',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete-virtual-scroller.component.html'
})
export class AutocompleteVirtualScrollerComponent {
  readonly options = Array.from({ length: 10000 }, (_, index) => ({ label: `Option ${index + 1}`, value: index + 1 }));
}

import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { distinctUntilChanged, map } from 'rxjs/operators';
import {
  AutocompleteDirective,
  ButtonDirective,
  ColComponent,
  FormFeedbackComponent,
  IAutocompleteOption,
  RowComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-reactive',
  imports: [
    AutocompleteDirective,
    ButtonDirective,
    ColComponent,
    FormFeedbackComponent,
    JsonPipe,
    ReactiveFormsModule,
    RowComponent
  ],
  templateUrl: './autocomplete-reactive.component.html'
})
export class AutocompleteReactiveComponent {
  readonly formGroup = new FormGroup({
    framework: new FormControl<string | null>('React.js', { nonNullable: true, validators: Validators.required })
  });

  constructor() {
    this.formGroup.valueChanges
      .pipe(
        map((value) => value.framework),
        distinctUntilChanged()
      )
      .subscribe((value) => {
        console.log('* Value changed: ', value);
        console.log('* Control dirty: ', this.formGroup.get('framework')?.dirty);
        console.log('* Control pristine: ', this.formGroup.get('framework')?.pristine);
        console.log('* Control touched: ', this.formGroup.get('framework')?.touched);
      });
  }

  resetForm() {
    this.formGroup.reset({ framework: '' });
  }

  protected changeValue() {
    this.formGroup.get('framework')?.setValue('Angular');
  }

  protected setServerError() {
    const control = this.formGroup.get('framework');
    control?.setErrors({ ...control.errors, server: true });
    control?.markAsTouched();
  }

  protected clearServerError() {
    this.formGroup.get('framework')?.updateValueAndValidity();
  }

  handleOptionChange($event: IAutocompleteOption | null) {
    console.log('* handleOptionChange: ', $event);
  }

  handleValueChange($event: string | number | null | undefined) {
    console.log('* handleValueChange: ', $event);
  }

  handleInputChange($event: any) {
    console.log('* handleInputChange: ', `*${$event}*`, typeof $event);
  }
}

import { JsonPipe } from '@angular/common';
import { Component, signal, viewChild } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import {
  AutocompleteDirective,
  ButtonDirective,
  ColComponent,
  FormFeedbackComponent,
  IAutocompleteOption,
  RowComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-template-driven',
  imports: [
    AutocompleteDirective,
    ButtonDirective,
    ColComponent,
    FormFeedbackComponent,
    FormsModule,
    JsonPipe,
    RowComponent
  ],
  templateUrl: './autocomplete-template-driven.component.html'
})
export class AutocompleteTemplateDrivenComponent {
  readonly form = viewChild.required<NgForm>('form');

  readonly framework = signal<string | null>('Angular');

  readonly frameworks = ['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js'];

  protected changeValue() {
    this.framework.set('Next.js');
  }

  protected resetForm() {
    this.framework.set('');
    this.form().resetForm({ framework: '' });
  }

  protected handleValueChange($event: number | string | null | undefined) {
    console.log('handleValueChange', $event);
  }

  protected handleOptionChange($event: IAutocompleteOption | null) {
    console.log('handleOptionChange', $event);
  }

  protected handleInputChange($event: string) {
    console.log('handleInputChange', $event);
  }
}

import { JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { form, FormField, FormRoot, required } from '@angular/forms/signals';
import {
  AutocompleteDirective,
  ButtonDirective,
  ColComponent,
  FormFeedbackComponent,
  IAutocompleteOption,
  RowComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete-signal-forms',
  imports: [
    AutocompleteDirective,
    ButtonDirective,
    ColComponent,
    FormFeedbackComponent,
    FormField,
    FormRoot,
    RowComponent,
    JsonPipe
  ],
  templateUrl: './autocomplete-signal-forms.component.html'
})
export class AutocompleteSignalFormsComponent {
  readonly frameworkModel = signal({ framework: '' });

  readonly frameworkForm = form(this.frameworkModel, (schemaPath) => {
    required(schemaPath.framework, { message: 'framework is required' });
  });

  readonly frameworks = ['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js'];

  protected changeValue() {
    this.frameworkModel.set({ framework: 'Next.js' });
  }

  protected resetForm() {
    this.frameworkForm().reset({ framework: '' });
  }

  protected handleValueChange($event: number | string | null | undefined) {
    console.log('handleValueChange', $event);
  }

  protected handleOptionChange($event: IAutocompleteOption | null) {
    console.log('handleOptionChange', $event);
  }

  protected handleInputChange($event: string) {
    console.log('handleInputChange', $event);
  }
}