Adicionando um filtro em cada coluna para a tabela mat

Question

Eu encontrei um Stackblitz de outra Resposta StackOverflow e queria ver se eu poderia adicionar um filtro à tabela pai para cada coluna.

Aqui está meu Stackblitz que experimentei e foi o mais perto que consegui (ignore o CSS / estilo). Eu coloquei um filtro de entrada sob as colunas. (Observe que eu não implementei o próprio filtro de trabalho real no arquivo .ts) Estou percebendo algo interessante, porém, que o botão para classificar a coluna em si é empacotado não apenas com o nome do cabeçalho / coluna, mas com o próprio filtro - então, quando um usuário clica no filtro para focar no campo, ele também aciona uma classificação.

Tentei adicionar todo o mat-form-fieldbloco abaixo das thtags / header e nem mesmo funciona ou aparece. Estou perdido aqui e não consigo descobrir como colocar os filtros abaixo sem envolvê-los em um botão de classificação.

Answer 1

Se quiser evitar que o botão de classificação seja clicado ao clicar no campo de entrada, você pode tentar adicionar (click)="$event.stopPropagation();"ao campo de entrada. Também é possível que você precise adicionar isso aos eventos (mouseup)ou em (mousedown)vez do (click)evento.