Como aproveitar os sinais angulares para alternar a visibilidade dos meus componentes

O truque que eu uso é começar com o estado em um Signal/ WritableSignal. Isso geralmente está em um limite de componente/serviço, então é um bom candidato para input()or model()também:

type Config = { name: string; hidden: boolean; };

const sectionConfig = signal<Config[]>([]);

Então eu componho a partir daí usando computed(). Sejam fatias inteiras:

const visibleSections = computed(() => {
  const sections = this.sectionConfig();
  return sections.filter(s => !s.isHidden);
});

Ou chaves individuais:

const isSomeComponentVisible = computed(() => {
  const sections = this.visibleSections();
  return sections.find(s => s.name === 'someComponent') > -1;
});

const isOtherComponentVisible = computed(() => {
  const sections = this.visibleSections();
  return sections.find(s => s.name === 'otherComponent') > -1;
});

Então eu vinculo as fatias onde elas são necessárias:

@if (isSomeComponentVisible()) {
  <some-component></some-component>
}

@if (isOtherComponentVisible()) {
  <other-component></other-component>
}

O truque é perceber que o único estado que você precisa rastrear é sectionConfig. Todos os outros estados (incluindo visibleSections) são estados derivados. Seria tentador criar outro Signal/ WritableSignalpara visibleSectionse então usar effect()para atualizá-lo quando sectionConfighouver alterações, mas isso não é necessário e só levaria a mais problemas (confusão, ter que definir allowSignalWrites, etc).

Isso é super similar à maneira como eu uso o RxJS também. Ele está compondo um pipeline dos dados originais (a lista de configurações) para os dados desejados (a visibilidade de certas chaves).

A desvantagem é que as propriedades individuais não são dinâmicas. Você precisará criar um is_X_Visible()sinal para cada uma. Se você não quiser criá-las (ou não puder porque não conhece as chaves até o tempo de execução), precisará introduzir um Pipe(chamado da mesma forma que você faria com qualquer outro pipe baseado em parâmetros : @if (visibleSections() | contains:'someComponent')) ou precisará ajustar o formato da composição final para acomodar a pesquisa de tempo de execução desejada:

const keyToVisibleMap = computed(() => {
  const sections = this.visibleSections();
  return sections.reduce((keys, section) => {
    keys[section.name] = !section.hidden;
    return keys;
  }, {});
});

@if (keyToVisibleMap()['someComponent']) {
  <some-component></some-component>
}

@if (keyToVisibleMap()['otherComponent']) {
  <other-component></other-component>
}

Então, para atualizar, basta passar um novo valor para o nível superior Signal/ WritableSignale o restante será distribuído em cascata pela árvore reativa para você:

type SetSectionVisibilityEvent = {
  itemValue: { name: string };
  value: { name: string }[];
}

public setSectionVisibility(e: SetSectionVisibilityEvent): void {
  const newConfig = [...this.sectionConfig()];
  const section = newConfig.find(s => s.name === e.itemValue.name);
  if (section) {
    section.hidden = e.value.findIndex(p => p === e.itemValue) === -1;
  }
  this.sectionConfig.set(newConfig);
}

O primeiro passo é converter sectionConfigpara um sinal primário.

sectionConfig = signal([
  {
    name: 'someComponent',
    hidden: false,
  },
  {
    name: 'otherComponent',
    hidden: false,
  },
]);

Então, a propriedade visibleSectionsé um estado derivado, então usamos linkedSignalpara derivar o estado do original sectionConfig(observe que estou usando linkedSignalem vez de computedporque você tem uma ligação bidirecional com o HTML [(ngModel)]="visibleSections", como você sabe, computednão é gravável, então usamos linkedSignal).

visibleSections = linkedSignal(() => {
  return this.sectionConfig().filter((item: any) => !item.hidden);
});

Quando queremos filtrar usando a interface do usuário, precisamos apenas do valor da string, então criamos outro estado derivado para determinar a string de componentes que precisam ser habilitados.

visibleSectionsFlags = computed(() => {
  return this.sectionConfig()
    .filter((item: any) => !item.hidden)
    .map((item: any) => item.name);
});

O método change, nós alavancamos updateo método, que fornece o valor do sinal. Aqui, procuramos o valor selecionado e então alternamos o sinalizador. O ponto mais importante que você precisa notar é que, usamos array destructuringpara criar uma nova referência de memória (Arrays e objetos são armazenados como referências de memória), o sinal verifica se o valor foi alterado. Então, devemos alterar a referência de memória do array, somente então o sinal será considerado como o valor a ser alterado e os estados derivados serão recalculados.

public setSectionVisibility(e: any): void {
  this.sectionConfig.update((sectionConfig: any) => {
    const foundIndex = this.sectionConfig().findIndex(
      (c) => c.name === e.itemValue.name
    );
    if (foundIndex > -1) {
      sectionConfig[foundIndex].hidden = !sectionConfig[foundIndex].hidden;
    }
    return [...sectionConfig];
  });
}

No lado HTML, podemos vincular o visibleSectionse ngModelentão ocultar/mostrar os componentes, usamos o método array includespara verificar se o componente deve ser mostrado ou não visibleSectionsFlags().includes("someComponent").

Código completo:

TS:

import {
  Component,
  OnInit,
  computed,
  linkedSignal,
  signal,
} from '@angular/core';
import { ImportsModule } from './imports';
import { JsonPipe } from '@angular/common';
interface City {
  name: string;
  code: string;
}

@Component({
  selector: 'app-a',
  template: `a comp`,
  standalone: true,
})
export class A {}

@Component({
  selector: 'app-b',
  template: `b comp`,
  standalone: true,
})
export class B {}

@Component({
  selector: 'multi-select-basic-demo',
  templateUrl: './multi-select-basic-demo.html',
  standalone: true,
  imports: [ImportsModule, A, B, JsonPipe],
})
export class MultiSelectBasicDemo {
  sectionConfig = signal([
    {
      name: 'someComponent',
      hidden: false,
    },
    {
      name: 'otherComponent',
      hidden: false,
    },
  ]);

  visibleSections = linkedSignal(() => {
    return this.sectionConfig().filter((item: any) => !item.hidden);
  });

  visibleSectionsFlags = computed(() => {
    return this.sectionConfig()
      .filter((item: any) => !item.hidden)
      .map((item: any) => item.name);
  });

  public setSectionVisibility(e: any): void {
    this.sectionConfig.update((sectionConfig: any) => {
      const foundIndex = this.sectionConfig().findIndex(
        (c) => c.name === e.itemValue.name
      );
      if (foundIndex > -1) {
        sectionConfig[foundIndex].hidden = !sectionConfig[foundIndex].hidden;
      }
      return [...sectionConfig];
    });
  }
}

HTML:

<p-multiSelect
  #multiselect
  defaultLabel="Show/hide sections"
  optionLabel="name"
  name="show-hide-sections"
  scrollHeight="300px"
  styleClass="multiselect-as-button mr-3 ml-3"
  dropdownIcon="fas fa-bars rotate-90"
  [options]="sectionConfig()"
  [(ngModel)]="visibleSections"
  [displaySelectedLabel]="false"
  (onChange)="setSectionVisibility($event)"
  [style]="{ width: '208px' }"
  [showHeader]="false"
  [appendTo]="'body'"
></p-multiSelect>
<br /><br />
@if (visibleSectionsFlags().includes("someComponent")) {
<app-a></app-a><br /><br />
} @if (visibleSectionsFlags().includes("otherComponent")) {
<app-b></app-b><br /><br />
}

Demonstração do Stackblitz