No código mostrado durante a aula percebi que durante o filtro ou quando trabalha-se com um conjunto de dados que não contém um contato para cada letra do alfabeto o separador vai estar visível mesmo assim. Como faria para implementar uma exibição responsiva neste sentido? É possível utilizando o @for?
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)
}));
*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!