Angular - Невозможно создать динамический c настраиваемый контрольный список только в шаблоне с реактивными формами

Question

Мне нужно создать функцию, позволяющую пользователю добавлять шагов в рецепт. Как я могу добавить кнопку редактирования для работы в шаблоне HTML?

У меня есть эта форма:

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<input placeholder="Recipe name..." 
       formControlName="recipeName" 
       type="text"> 

<textarea  placeholder="Recipe Description..." 
       formControlName="recipeDescription" 
       type="text"> </textarea>
   
<app-search-ingredients (searchedIngredient)="addIngredient($event)"></app-search-ingredients> 


<ng-container formArrayName="recipeIngredients">
    <ul>
          <li *ngFor="let ingredient of profileForm.controls.recipeIngredients?.value; let i = index" (click)="removeIngredientsFromMenu(i)">
          {{ingredient}}
          </li>
   </ul>
 </ng-container>

 <ng-container formArrayName="recipeSteps">
   
   <ul>
          <li *ngFor="let step of profileForm.controls.recipeSteps?.value; let i = index">
          Step {{i+1}}:
           
          
          <input type="text" #new_field>
          <button type="button" (click)="stepChange(new_field.value,i)">Confirm</button>
          <-- If user pressed edit then It should be able to modify the step input-->
          <button type="button">Edit</button>
          <button type="button">Remove</button>
          </li>
          
          <button type="button" (click)="addEmptyStep()">Add Step</button>
    
   </ul>

</ng-container>

<button type="submit">
  {{submitButton}}
  </button>

Я мог бы сделать это с логическим значением в моем коде, чтобы проверить, была нажата кнопка редактирования и изменил шаблон, но шаги добавляются динамически, и пользователю разрешено редактировать несколько шагов.