{{ t.pages.multiSelect.cardTitle }}

A demo de multiseleção mostra seleção múltipla com dataSource estável, projeção manual e documentação organizada entre visão geral e API.

Descrição

O componente mantém uma coleção de valores selecionados e projeta o resultado diretamente no trigger.

Recursos

Seleção múltipla com badges e placeholder.
Integração com dataSource ou li-multi-option.
Binding direto com listas no ngModel.

Limitações

Evite recriar listas de opções em getters reativos.
O overlay precisa de atualização consistente ao mudar a seleção.
Para coleções muito grandes, mantenha paginação ou busca no pai.

{{ t.pages.multiSelect.channels }}

{{ t.pages.multiSelect.projectedTargets }}

{{ t.pages.multiSelect.optionPortal }}

{{ t.pages.multiSelect.optionApi }}

{{ t.pages.multiSelect.optionBatch }}

{{ t.pages.multiSelect.channels }}: {{ selectedChannelsLabel }}

{{ t.pages.multiSelect.projectedLabel }}: {{ projectedChannelsLabel }}

Como utilizar

li-multi-select segue a mesma estratégia do li-select, mas mantém múltiplos valores selecionados e renderiza badges no trigger.

O padrão recomendado para o demo e para produção é manter dataSource estável e atualizar apenas a coleção de valores selecionados.

[dataSource]: lista de opções externas.
labelKey: chave usada para o texto visível.
valueKey: chave usada no array do ngModel.
[(ngModel)]: lista de valores selecionados.
[placeholder]: texto quando nada está marcado.

<li-multi-select
  [dataSource]="channelOptions"
  labelKey="label"
  valueKey="id"
  [(ngModel)]="selectedChannels">
</li-multi-select>

Observações e limites

Não recrie a lista de opções em getters reativos.
Agende overlay.update() em frame futuro ao mudar a seleção.
Calcule maxHeight pelo viewport, não pela altura atual do painel.

// Bom: opções criadas uma única vez
late final List<Map<String, dynamic>> channelOptions;

// O ngModel muda, mas o dataSource continua estável
List<dynamic> selectedChannels = <dynamic>['email', 'push'];