How to loop through Craft CMS query in Angular 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:

&lt;div *ngFor="let entry of entries | async "&gt;

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

&lt;/div&gt;


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

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

  &lt;ng-template ngFor let-obj [ngForOf]="entry.imageHero"&gt;  
    &lt;h1&gt;{{ obj.heroTitle }}&lt;/h1&gt;
  &lt;/ng-template&gt;


This also works: 

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