Filter items by category with angular 2+

Question

I am new at the angle, and I need to do a filtering. I have a program listing and I want to filter these programs through a menu. For example, in the menu you will have the categories: football, blogs, sports... When I click on the category "football" I want to have in the list only the programs corresponding to football, and so on. How I can do this filtering with angular+2?

menu:

<div *ngIf="(programs$ | async) as programs; else: loading">
  <ul class="c-programs__nav">
    <li *ngFor="let program of programs; let i = index">
      <a href="#" class="c-programs__link">{{ program.name }}</a>
    </li>
  </ul>
</div>

listing:

<div class="row" *ngFor="let program of programs; let i = index">
  <div class="row" *ngFor="let program of programs; let i = index">
    <div
      class="col-lg-3 col-md-6 col-sm-6 col-xs-12"
      *ngFor="let program of program.programs"
    >
      <h2 class="c-programs__title">{{ program.name }}</h2>
    </div>
  </div>
</div>

json:

    [
  {
    "id": 1,
    "name": "Programas",
    "base_Url": "http://uol.com.br",
    "order": 0,
    "programs": [
      {
        "id": 56,
        "name": "Programa 1",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 57,
        "name": "Programa ",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 58,
        "name": "Programa",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      }
    ]
  },
  {
    "id": 2,
    "name": "Jornalísticos",
    "base_Url": "http://uol.com.br",
    "order": 1,
    "programs": [
      {
        "id": 59,
        "name": "Programa 2",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 60,
        "name": "Programa ",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      },
      {
        "id": 61,
        "name": "Programa",
        "base_Url": "https://google.com",
        "active": true,
        "menu_id": 2
      }
    ]
  }
]