Как я могу создать встроенный редактор в angular?

Question

У меня есть создание и удаление вниз, но я не могу понять, как сделать встроенное редактирование.

Это мой HTML:

                        <div class="form-group input-group mb-3 no-margin">
                            <input 
                            type="text" 
                            class="form-control" 
                            placeholder="Add Item" 
                            aria-label="Add Item" 
                            formControlName="item"
                            aria-describedby="basic-addon2"
                            [(ngModel)]="item"
                            >
                            <div class="input-group-append">
                              <button (click)="onAddItem()" class="btn color" type="button">Add Item</button>
                            </div>
                          </div>
                          <div class="container">
                            <div class="row" *ngFor="let item of items; let i = index">
                              <div *ngIf="!item.isEditing" class="col-sm-10 col-8 item-name">
                                {{item.name}}
                              </div>
                              <div *ngIf="item.isEditing" class="col-sm-10 col-8 item-name">
                                <input value="{{item.name}}" type="text">
                                <p (click)="item.isEditing = false; onChangeItem(i)">click</p>
                              </div>
                              <div class="edit col-sm-1 col-2">
                                <i (click)="item.isEditing = true" class="material-icons">edit</i>
                              </div>
                              <div class="delete col-sm-1 col-2">
                                <i (click)="onDeleteItem(i)" class="material-icons delete">delete</i>
                              </div>
                            </div>
                        </div>

Это мой ts:

  onChangeItem(value){
    this.items[value] = ({name: this.newItem});
    console.log('value', value);
  }


  onAddItem(){
    if(this.item === ''){
      return;
    }
    this.items.push({name: this.item});
    this.item = '';
  }

  onEditItem(item){
    item.isEditing = true;
  }

  onDeleteItem(x) {
    this.items.splice(x, 1)
    console.log(this.items);
  }

Я не могу использовать [{ngModal}], потому что он выдает ошибка:

ngModel нельзя использовать для регистрации элементов управления формы с помощью родительской директивы formGroup. Попробуйте вместо этого использовать партнерскую директиву formGroup "formControlName". Пример:

Любая помощь будет принята с благодарностью.