Создать новые Аккордеонные Панели через форму

Question

Я работаю в Angular 6 и пытаюсь создать аккордеон, который позволяет вам добавлять / удалять панели на основе содержимого формы. Вот насколько я получил:

Код HTML для страницы с формой на ней, где будет отображаться Аккордеон (synopsis.component. html):

<mat-toolbar color="primary">
    <span>
      <button mat-button onclick="window.location.href ='#'">
        <i class="fab fa-fort-awesome-alt fa-3x">Home</i>
      </button>
      <a href="#"></a>
    </span>
  </mat-toolbar>
<div class="col-3" id="action-jumbotron">
  <div class="row">
    <div class="jumbotron">
        <div class="container" [formGroup]="totalForm" (ngSubmit)="onSubmit()">
            <mat-form-field >
                <textarea matInput placeholder="Tagline" formControlName="formTagline"></textarea>
            </mat-form-field>
            <mat-form-field>
                <textarea matInput placeholder="Story" formControlName="formContent" ></textarea>
            </mat-form-field>

        </div>
        <button mat-raised-button type="submit" (click)="updateStory()" [disabled]="!totalForm.valid">More Story! <i class="fas fa-feather-alt fa-2x"></i></button>
      </div>
      </div>
</div>
<div class="col-9" id="accordion" style="margin-left: 400px;">
    <div class="container">
    <mat-accordion class="header-css-tag">
    <!--============================================-->
    <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
        <mat-expansion-panel-header>
            <mat-panel-title>
                Week 1
            </mat-panel-title>
            <mat-panel-description>
                Tagline 1 
            </mat-panel-description>
        </mat-expansion-panel-header>
        <p>
             Accordion Content
        </p>
            <mat-action-row>
                <button mat-button color="warn" (click)="prevStep()">Previous</button>
                <button mat-button color=primary (click)="nextStep()">Next</button>
            </mat-action-row>
    </mat-expansion-panel>

Машинопись (synopsis.component.ts)

import { Component, OnInit, Output } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { EventEmitter } from 'protractor';

@Component({
  selector: 'app-synopsis',
  templateUrl: './synopsis.component.html',
  styleUrls: ['./synopsis.component.scss']
})
export class SynopsisComponent implements OnInit {
//https://angular.io/guide/reactive-forms

  newStory:string[]=[];

  totalForm = new FormGroup({
    formTagline: new FormControl(''),
    formContent: new FormControl(''),
  });


  constructor() {}

  ngOnInit() {
    this.updateStory();
  }

  updateStory(){
    console.log(this.totalForm.value.formTagline)
    console.log(this.totalForm.value.formContent)
    const formTaglineChange = this.totalForm.get('formTagline')
    formTaglineChange.valueChanges.forEach(
      (value:string) => this.newStory.push(value)
    )

  }

  onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.totalForm.value);

  }
//===============================================================
  //Steps the accordion panel, from angular material accordion
  step = 0;
  setStep(index:number){
    this.step =index;
  }
  nextStep() {
    this.step++;
  }
  prevStep() {
    this.step--;
  }
//===============================================================

}

Создание аккордеона TS

import { Component, OnInit } from '@angular/core';
import { MatExpansionPanelDescription } from '@angular/material/expansion';

@Component({
  selector: 'app-story-panel',
  templateUrl: './story-panel.component.html',
  styleUrls: ['./story-panel.component.scss']
})
export class StoryPanelComponent implements OnInit {


  constructor() { }

  ngOnInit() {

    function newAccordionPanel(){
      const newtagline = "this is a new tagline";
      const newContent = "this is new content";

      var myAccordion = document.createElement("mat-expansion-panel");
        //myAccordion.???? = "[expanded]='step === 1' (opened)='setStep(1)' hideToggle"
      var panelHeader = document.createElement("mat-expansion-panel-header");
      var panelDescription = document.createElement("mat-panel-description");
      panelDescription.innerText = newtagline;

      myAccordion.innerText = newContent

      document.getElementById("accordion").appendChild(myAccordion);
      myAccordion.appendChild(panelHeader);
      panelHeader.appendChild(panelDescription);
    }
}
  }


//This is what I want 

/*
<mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
    <mat-expansion-panel-header>
        <mat-panel-description>
            {{newStory.tagline}}
        </mat-panel-description>
    </mat-expansion-panel-header>
            {{newStory.Content}}
        <mat-action-row>
            <button mat-button color=primary (click)="nextStep()">Next</button>
        </mat-action-row>
</mat-expansion-panel>
*/

Мои основные вопросы можно сформулировать так:

1. Как мне добавить такие вещи, как привязки [ngModel] к элементу HTML с помощью js / ts

2. Как лучше всего общаться между формой и созданием аккордеона составная часть? Я думаю, что это путем создания наблюдаемого, но я не уверен, как подписаться на него в компоненте панели истории.

У меня есть тонна других вопросов, но это два основных места я застрял. Любая помощь будет оценена.