Angular 6 recursive component to create multilevel questions answers hierarchy

Question

I am trying to implement a multilevel questions-answers tree. More specifically, there will be one root question and then one would have the opportunity to create multiple answers for that same root question. Depending on the answer, there will be another question-answer pair. Again, this new question now has the possibility of several answers just like the root one. And this will continue at least for five steps. Same will applicable for the other answers of the root question and so on and so forth... For the clarification, I have attached a screen-shot.

I have tried for couple of days to achieve this functionality. However, I couldn't get the expected solution. I have tried with Angular reactive forms. For this, I followed these approaches (1) https://stackblitz.com/edit/angular-4dt3sa?file=src%2Fapp%2Fapp.component.ts

Now I am trying this code. This was implemented in AngularJS. However, converting this into Angular 6 does not help me to get out of this riddle.

Code after converting to Angular 6.

component.ts:

import { Component, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-analysis-form',
  templateUrl: './analysis-form.component.html',
  styleUrls: ['./analysis-form.component.css']
})
export class AnalysisFormComponent implements OnInit {

  tree = [{ name: 'Node', nodes: [] }];

  constructor() { }

  ngOnInit() { }

  delete(data) {
    data.nodes = [];
  }
  add(data) {
    const post = data.nodes.length + 1;
    const newName = data.name + '-' + post;
    data.nodes.push({ name: newName, nodes: [] });
  }

}

html:

{{data.name}}
<button (click)="add(data)">Add node</button>
<button (click)="delete(data)" [hidden]="!data.nodes.length > 0">Delete nodes</button>
<ul>
  <li *ngFor="data in data.nodes">
    <app-analysis-form></app-analysis-form>
  </li>
</ul>

<ul>
  <li *ngFor="data in tree">
    <app-analysis-form></app-analysis-form>
  </li>
</ul>

Thanks in advance for suggestions.