Angular: render section list data using *ngFor

Is there any way to display section list in Angular using *ngFor? All examples I found are using separate loops for separate sections. Thank you!

const DATA = [
  {
    title: "Main dishes",
    data: [{name: "Pizza", type: "1"}, {name: "Pizza", type: "5"}]
  },
  {
    title: "Sides",
    data: [{name: "Pizza", type: "2"}]
  },
  {
    title: "Drinks",
    data: [{name: "Pizza", type: "3"}]
  },
  {
    title: "Desserts",
    data: [{name: "Pizza", type: "4"}]
  }
];

Expected UI:

Answer

You may use the following code on the template:

<div *ngFor="let item of DATA">
    <h3>{{item.title}}</h3>
    <section *ngFor="let inner of item.data" style="background-color: #f558e0; 
                 width: 150px; margin-bottom: 1%;">
        <div>{{inner.name}}</div>
        <div>{{inner.type}}</div>
    </section>
</div>

Tweak the styles accordingly.