I am working with a JSON list that contains various audio files categorized by genre, along with their corresponding URLs.
export const musicList = [
{
'id': 0,
'catName': 'upload',
'audios': [
{
'id': 0,
'name': 'crowd-cheering.mp3',
'path': 'a.com/music.mp3'
}
]
},
{
'id': 1,
'catName': 'rock',
'audios': [
{
'id': 1,
'name': 'Consectetur',
'path': 'a.com/music.mp3'
},
{
'id': 2,
'name': 'Vivamus',
'path': 'a.com/music.mp3'
}
]
},
{
'id': 2,
'catName': 'folk',
'audios': [
{
'id': 1,
'name': 'Suspendisse',
'path': 'a.com/music.mp3'
}
]
}
];
To display these music files, I am using *ngFor like this:
<div *ngFor="let music of musicList">
<div *ngFor="let audio of music.audios">
{{audio.name}}
</div>
</div>
Additionally, I am listing the categories with radio buttons as well:
<div *ngFor="let category of musicList">
<input type="radio" name="genre"> {{category.catName}}
</div>
Now, I would like to implement a filter option. When a user selects a radio button, the list should display only the audio files related to the selected category.
Angular CLI: 6.0.8
Typescript : 2.7.2