Удалить элемент с заголовком из списка угловых материалов

По умолчанию обнаружение изменений Angular проходит через ваш массив и проверяет, было ли изменение ссылки на предыдущее изменение. Теперь вы не изменили никакую ссылку, только свойство этих объектов. Поскольку ссылка на объект в вашем массиве не меняется, Angular не распознает изменение. Я рекомендую использовать неизменяемые операторы, которые не мутируют предыдущий объект, а создают новый:

removeFromList(obj){
  this.valmap = this.valmap
    .map(element => {
      return {category: element.category, values: element.values.filter(fruit => fruit.name !== obj.name)}
  })
    .filter(element => element.values.length > 0)
}

Другой вариант — ввести trackBy в ˙ngFor`, чтобы сообщать Angular об изменении свойства.

Ты был очень близок к тому, чтобы сделать это.

Это ваше приложение исправлено и работает: https://stackblitz.com/edit/angular-material-list-bufnqr

Чтобы объяснить, лучше вызывать element.category вместо element['category'] и так далее для каждого поля, и вам нужно удалить element.category, а не element.name в конце, когда вы удаляете последний элемент.