Отображение элементов по категориям

Всем привет, у меня есть компонент категорий, при нажатии на которые, должны отображаться только те карточки, которые имеют данную категорию. Вот собственно компонент категорий

<div class="line"></div>
<ul>
    <li appZoom [zoom]="20"><a class="category-link">General</a></li>
    <li appZoom [zoom]="20"><a class="category-link">Inbox</a></li>
    <li appZoom [zoom]="20"><a class="category-link">Work</a></li>
    <li appZoom [zoom]="20"><a class="category-link">Personal</a></li>
    <li appZoom [zoom]="20"><a class="category-link">Social</a></li>
</ul>

Вот я написал 2 метода для получения карточек по категориям, методы находятся в сервисе

 getTodosByCategory(category: Categories): void {
    this.todos$.next(
      this.todos$.value.filter((todo) => todo.category === category)
    );
  }

  filterTodoByCategory(category: Categories): Todo[] {
    return this.todos$.value.filter((todo) => todo.category === category);
  }

Есть enum с категориями

export enum Categories {
  GENERAL = 'General',
  INBOX = 'Inbox',
  WORK = 'Work',
  PERSONAL = 'Personal',
  SOCIAL = 'Social',
};

Как мне сделать так, чтобы при нажатии, отображались только подходящие карточки ?