Как добавить компонент как дочерний в угловых

Question

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

@ViewChild(ConfigurationTableComponent) tableComponent: ConfigurationTableComponent;

И UI как:

<button class="btn btn-success" (click)="addElement()">Add new table row</button>

И функция addElement():

  addElement(event: { stopPropagation: () => void; }) {
    this.table.nativeElement.insertAdjacentHTML('beforeend', ConfigurationTableComponent);
    event.stopPropagation();
  }

Что я хочу, это когда я нажимаюкнопка должна добавить еще одну строку в таблицу.

Вот пример

Answer 1

Вы пытаетесь сделать это JQuery способом.Угловым образом это будет что-то вроде этого:

      <tr *ngFor="let row of elements, let i = index">
        <td>{{i + 1}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.firstName}}</td>
        <td>{{row.age}}</td>
      </tr>

  elements = [];

  addElement() {
    this.elements = [...this.elements, {lastName: 'Doe', firstName: 'John', age: 26}]
  }

Вот блик стека: https://stackblitz.com/edit/angular-waxqv1?file=src/app/app.component.html