Olá, Hugo, tudo bem? Agradeço por compartilhar sua observação e sua preocupação com a experiência do usuário. Realmente, a abordagem de recarregar todas as fotos ao clicar em "load more" após remover o filtro pode não ser a melhor escolha, como você apontou.
Uma alternativa seria exibir uma mensagem informando ao usuário que não existem mais fotos para serem exibidas com base no filtro selecionado. Dessa forma, o usuário não fica frustrado ao clicar em "load more" e ver as mesmas fotos novamente.
Outra opção seria desabilitar o botão "load more" quando não houver mais fotos para serem exibidas com base no filtro selecionado. Isso também pode ajudar a evitar a frustração do usuário.
No entanto, a abordagem de usar output property também pode ser útil, como você mencionou. Por exemplo, poderíamos usar uma variável no componente pai que controla o número de fotos exibidas. Quando o usuário clica em "load more", essa variável é atualizada e passada para o componente filho responsável por exibir as fotos.
Segue um exemplo de como poderíamos implementar isso:
No componente pai:
export class AppComponent {
filteredPhotos: Photo[] = [];
numPhotosToShow = 12;
onFilterChange(filteredPhotos: Photo[]) {
this.filteredPhotos = filteredPhotos;
this.numPhotosToShow = 12;
}
onLoadMore() {
this.numPhotosToShow += 12;
}
}
No componente filho responsável por exibir as fotos:
<div *ngFor="let photo of filteredPhotos | slice:0:numPhotosToShow">
<!-- exibe a foto aqui -->
</div>
<button *ngIf="filteredPhotos.length > numPhotosToShow" (click)="onLoadMore()">Load More</button>
Dessa forma, quando o usuário clica em "load more", apenas as próximas 12 fotos são exibidas, em vez de recarregar todas as fotos novamente. Além disso, se não houver mais fotos para serem exibidas, o botão "load more" não é exibido.
Espero que essas sugestões tenham sido úteis.
