[Dúvida] Como filtrar a exibição dos separadores

Olá Vinicius!

Uma dica para que os separadores sejam exibidos apenas quando há dados correspondentes, você pode adicionar uma condição no seu template que verifique se o conjunto de dados para cada letra específica contém elementos.

Em geral o que pode ser feito é que você pode preparar um array de letras do alfabeto e filtrar quais letras têm contatos correspondentes:

alfabeto = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

contatosPorLetra = this.alfabeto.map(letra => ({
  letra: letra,
  contatos: this.contatos.filter(contato => contato.inicial === letra)
}));

1. E no seu template Angular, você pode usar *ngFor para iterar sobre contatosPorLetra e adicionar uma condição *ngIf para mostrar o separador apenas se houver contatos para aquela letra:

<div *ngFor="let grupo of contatosPorLetra">
  <div *ngIf="grupo.contatos.length > 0">
    <h2>{{ grupo.letra }}</h2>
    <div *ngFor="let contato of grupo.contatos">
      {{ contato.nome }}
    </div>
  </div>
</div>

A ideal geral é que o <h2> com a letra do alfabeto só será exibido se houver contatos que começam com essa letra, evitando assim a exibição de separadores desnecessários.

Espero ter ajudado a lhe dar um norte e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!