Select

import { Component } from '@angular/core';
import { WrOption, WrOptionGroup, WrOptionLeading, WrSelect } from 'ngwr/select';

@Component({ imports: [WrOption, WrOptionGroup, WrOptionLeading, WrSelect] })
export class MyComponent {}

<wr-select placeholder="Assign to" [(value)]="assignee">
  @for (p of people; track p.id) {
    <wr-option [value]="p.id" [label]="p.name">
      <ng-template wrOptionLeading let-placement="placement">
        <wr-avatar shape="circle" [size]="avatarPx[placement]">{{ p.initials }}</wr-avatar>
      </ng-template>
      {{ p.name }} <small>{{ p.team }}</small>
    </wr-option>
  }
</wr-select>

<!-- Search -->
<wr-select mode="search" clearable placeholder="Search people" [(value)]="reviewer">
  @for (p of people; track p.id) { … the same options … }
</wr-select>

<!-- Multi -->
<wr-select mode="multi" searchable clearable placeholder="Add assignees" [(value)]="assignees">
  @for (p of people; track p.id) { … the same options … }
</wr-select>

<!-- [options], [loader] and virtualScroll rows: a template directly in <wr-select>. -->
<wr-select mode="search" virtualScroll [options]="people" [displayWith]="name">
  <ng-template wrOptionLeading let-person let-placement="placement">
    <wr-avatar shape="circle" [size]="avatarPx[placement]">{{ person.initials }}</wr-avatar>
  </ng-template>
</wr-select>

import { WrAvatar } from 'ngwr/avatar';
import { WrOption, WrOptionLeading, type WrOptionLeadingPlacement, WrSelect } from 'ngwr/select';

@Component({ imports: [WrSelect, WrOption, WrOptionLeading, WrAvatar] })
export class AssigneePicker {
  // One template, three places: size it per placement.
  protected readonly avatarPx: Record<WrOptionLeadingPlacement, number> = { option: 24, value: 20, chip: 16 };
}

<wr-select
  mode="search"
  serverSearch
  placeholder="Search a country"
  [options]="results()"
  [loading]="pending()"
  [(value)]="picked"
  (searchChange)="onSearch($event)"
/>

// Debounced by [debounceMs]; emits '' when the field is cleared.
onSearch(query: string): void {
  this.store.dispatch(searchCountries({ query }));
}

<wr-select
  mode="search"
  virtualScroll
  placeholder="Search 5,000 items"
  [options]="bigOptions"
  [(value)]="picked"
/>

<!-- Signal Forms -->
<wr-select [formField]="form.framework">
  <wr-option value="angular">Angular</wr-option>
  <wr-option value="react">React</wr-option>
</wr-select>

<!-- Reactive forms -->
<form [formGroup]="form">
  <wr-form-field label="Framework" required>
    <wr-select formControlName="framework" placeholder="Pick one">
      <wr-option value="angular">Angular</wr-option>
      <wr-option value="react">React</wr-option>
    </wr-select>
    <wr-form-error key="required">Pick a framework.</wr-form-error>
  </wr-form-field>
</form>

<!-- Template-driven -->
<wr-select [(ngModel)]="framework" name="framework">…</wr-select>

import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

import { WrFormError, WrFormField } from 'ngwr/form';
import { WrOption, WrSelect } from 'ngwr/select';

@Component({
  imports: [ReactiveFormsModule, WrFormField, WrFormError, WrSelect, WrOption],
  templateUrl: './my.html',
})
export class MyComponent {
  protected readonly form = new FormGroup({
    framework: new FormControl<string | null>(null, Validators.required),
  });
}

<!-- Bind the key, not the object. -->
<wr-select formControlName="categoryId" placeholder="Pick a category">
  @for (cat of categories(); track cat.id) {
    <wr-option [value]="cat.id">{{ cat.name }}</wr-option>
  }
</wr-select>

// Never matches: the trigger shows the placeholder, the form stays valid.
const category = new FormControl<Category | null>(null);
category.setValue({ id: 2, name: 'Laptops' });

// This matches.
const categoryId = new FormControl<number | null>(null);
categoryId.setValue(2);