I'm new to the angle, and I need to do a filtering. I have a list of programs and I want to filter these programs through a menu. For example, in the menu will have the categories: football, blogs, sports ... When I click on the category "football" I want the list to have only the corresponding programs for football, and so on. How can I 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
}
]
}
]