Lista rozwijana - angular

Witam, mam taki problem, jest Lista:
id: 2, fuel_id: 5,
id: 3, fuel_id: 4,
id: 4, fuel_id: 6,
id: 5, fuel_id: 7,
id: 6, fuel_id: 4,
id: 7, fuel_id: 5,
id: 8, fuel_id: 7,
id: 9, fuel_id: 4,
id: 10, fuel_id: 5,

Chce posortowac liste wg fuel_id i potem np jesli klikne na pozycje fuel_id: 5 to rozwinie się tylko lista z id: 2, 7, 10
Wiem ze to zapewne banalny problem ale dopiero zaczynam, prosze o pomoc i z góry dzięki

const arr = [
{id: 2, fuel_id: 5},
{id: 3, fuel_id: 4},
{id: 4, fuel_id: 6},
{id: 5, fuel_id: 7},
{id: 6, fuel_id: 4},
{id: 7, fuel_id: 5},
{id: 8, fuel_id: 7},
{id: 9, fuel_id: 4},
{id: 10, fuel_id: 5},
];

const sortedArr = [];

arr.forEach(obj => {
  const found = sortedArr.find( sObj => sObj.fuel_id === obj.fuel_id);
	if(!found){
  	sortedArr.push({fuel_id: obj.fuel_id, childrens: [obj]});
    return;
  }
  found.childrens.push(obj);
});

console.log(sortedArr);

https://jsfiddle.net/mav7d4q5/

Super, o to chodziło, wielkie dzięki!

Podpowiedzcie jeszcze jak to wyswietlić, bo tu jakby nie było są dwa poziomy danych, myslalem ze ogarne to za pomoca zwyklego ngFor ale chyba sie przeliczyłem.