{{ t.pages.select.title }} {{ t.pages.select.subtitle }}

{{ t.pages.select.breadcrumb }}
{{ t.pages.select.cardTitle }}

A demo de select mostra uso com dataSource estável e com projeção manual de opções, reunindo descrição, recursos, limitações e exemplos visíveis no mesmo fluxo.

Descrição

O componente resolve seleção simples com overlay, opção projetada e ligação direta ao ngModel.

Recursos
  • Fonte externa com dataSource.
  • Projeção manual com li-option.
  • Placeholder, itens desabilitados e binding simples.
Limitações
  • Evite recriar o dataSource em getters reativos.
  • O overlay depende de opções consistentes para navegação e altura.
  • Para lógica pesada de filtro, mantenha a orquestração no componente pai.
{{ t.pages.select.optionPriority }} {{ t.pages.select.optionBacklog }} {{ t.pages.select.optionArchived }}
{{ t.common.status }}: {{ selectedStatusLabel }}
{{ t.pages.select.projectedStatus }}: {{ projectedStatusLabel }}
Como utilizar

li-select aceita tanto [dataSource] quanto projeção com li-option.

Para evitar travamentos e ciclos de renderização desnecessários, prefira fornecer listas estáveis no componente pai, em vez de getters que recriam o array a cada mudança de estado.

  • [dataSource]: lista de opções externas.
  • labelKey: chave usada para o texto visível.
  • valueKey: chave usada como valor do ngModel.
  • disabledKey: chave booleana para desabilitar itens.
  • [(ngModel)]: valor selecionado.
  • [placeholder]: texto exibido quando vazio.
<li-select
  [dataSource]="statusOptions"
  labelKey="label"
  valueKey="id"
  disabledKey="disabled"
  [(ngModel)]="selectedStatus">
</li-select>
Observações e limites
  • Não recrie o dataSource em getters.
  • O overlay não deve calcular altura com base no próprio painel renderizado.
  • Eventos globais de teclado devem tratar apenas navegação e escape.
// Bom: lista estável criada uma vez
late final List<Map<String, dynamic>> statusOptions;

// Evite: getter que recria a lista a cada change detection
// List<Map<String, dynamic>> get statusOptions => [...];