Angular Use Component By Selector Array

You can achieve that with the compiler. Please note it is deprecated.

The Directive

import { Compiler, Directive, Input, ViewContainerRef } from '@angular/core';
import { AppModule } from './app.module';

@Directive({
  selector: '[appTemplateIterator]',
})
export class TemplateIteratorDirective<T> {
  private _data: T;
  private _selectors: string[];

  @Input()
  set appTemplateIterator(value: T) {
    this._data = value;

    this.updateView();
  }

  @Input()
  set appTemplateIteratorFor(value: string[]) {
    this._selectors = value;

    this.updateView();
  }

  constructor(
    private compiler: Compiler,
    private viewContainer: ViewContainerRef
  ) {}

  updateView() {
    this.viewContainer.clear();

    if (this._data && this._selectors) {
      this.compiler
        .compileModuleAndAllComponentsAsync(AppModule)
        .then((module) => {
          const allComponentFactories = module.componentFactories;
          this._selectors
            .map((selector) =>
              allComponentFactories.find(
                (componentFactory) => componentFactory.selector === selector
              )
            )
            .filter(Boolean)
            .forEach((componentFactory) => {
              this.viewContainer
                .createComponent(componentFactory)
                .setInput('data', this._data);
            });
        });
    }
  }
}

Usage

<ng-container
  *appTemplateIterator="'Foobar'; for: ['app-my-a', 'app-my-b']"
></ng-container>

Stackblitz: https://stackblitz.com/edit/angular-ivy-ng7ju5?file=src/app/app.component.html

You can not use interpolation in place for HTML tags. Your best bet would be the Dynamic Component Loader