Как разместить несколько файлов HTML в содержимом группы вкладок?

Question

Я пытаюсь поместить массив файлов article.html в отдельные 'mat-tab'. Я хотел бы использовать * ngFor, чтобы я мог циклически перемещаться по массиву объектов статей (с именем вкладки и ссылкой на html-файл для содержимого), но я не знаю, как правильно связать html-файлы.

Я пытался использовать HTML-импорт - link rel = "import" href = "myfile.html", но я не уверен, как разместить и зациклить фактический контент (а Chrome сообщает мне, что импорт HTML испорченный - https://www.chromestatus.com/features/5144752345317376).

В component.html:

    <mat-tab-group>
      <mat-tab *ngFor="let x of articles" label={{x.name}}>
        <ng-template matTabContent>
            <x.content>
        </ng-template>
      </mat-tab>
    </mat-tab-group>

Из массива в component.ts:

    articles = [
        {
          content: "./path/to/article1.html",
          name: "Article 1"

        },
        {
          content: "./path/to/article2.html",
          name: "Article 2"
        }, etc. ]

В конечном итоге я хотел бы использовать компонент матовых вкладок (аналогично этому примеру https://material.angular.io/components/tabs/examples),, который использует файлы .html в качестве содержимого вкладок. Но мое текущее решение состоит в том, чтобы не использовать * ngFor и вводить имена меток и статьи html вручную, что занимает очень много времени.

Спасибо:)

EDIT: В конце концов я отбросил идею вкладок материала, вместо этого я использовал дочерние маршруты для достижения того же эффекта.

В этой видеоигре вся необходимая информация - https://www.youtube.com/watch?v=QpDSfl0Rbvc