How to loop through Craft CMS query in Angular

Question

Given the following query sample, how can I loop through the entries past the first array in Angular?

Here is the query sample:

query sample ($section: [String], $type: [String], $slug: [String]) {
entries (section: $section, type: $type, slug: $slug) {
... on sections_sample_Entry {
  pageTitle
  description
  keywords
  canonical
  topBanner
  imageHero {
    ... on imageHero_ImageHeroData_BlockType {
      backgroundImage {
        title
        url
        ... on images_Asset {
         altText
       }
      }
      seal {
        title
        url
        ... on images_Asset {
         altText
       }
      }
      heroTitle
      supertitle
      subtitle
      heading
      bullets
      ctaButton         
      }
    }
   }
  }
}

In the Angular template, I'm able to get and display the content within entries before the imageHero, anything after imageHero I have not been able to figured how to loop:

<div *ngFor="let entry of entries | async ">

   <h1 class="title">{{ entry.pageTitle }}</h1>
   <p>{{ entry.description }}</p>
   <p>{{ entry.keywords }}</p>
   <a href="{{ entry.canonical }}">{{ entry.canonical }}</a>
   <p class="banner" style="background-color:blue; padding:5px;color:#fff;"> 
   <strong>{{ entry.topBanner }}</strong></p>

</div>

How can I get entries.imageHero.heroTitle for instance?

The data return looks like the following when I console.log this query:

Answer 1

Got it working like this:

  <ng-template ngFor let-obj [ngForOf]="entry.imageHero">  
    <h1>{{ obj.heroTitle }}</h1>
  </ng-template>

This also works:

{{ entry.imageHero[0].heroTitle }}