pass angular components as an array to an html template

So, if I understood you correctly, you want to dynamically create these components in your HTML.

To do so you can simply use the NgComponentOutlet (see here for more).

Your code would look like following:

component.ts

components = [
  { name: 'First Ng Component', component: SmallAngularComponent },
  { name: 'Second Ng Component', component: AnotherSmallAngularComponent },
  // ...... and so on upto 7-8 smaller angular components    
];

You might have noticed that you don’t need <>for the components.

component.html

<ng-container *ngFor="let entry of components">
  <div class="col">
    <div class="row">
      <div class="col">{{ entry.name }}</div>
    </div>
    <div class="row">
      <div class="col mt-2">
        <ng-container *ngComponentOutlet="entry.component"></ng-container>
      </div>
    </div>
  </div>
</ng-container>

If you need to pass params to the different components you can have a look here or you need to programmatically create these components.