Angular 6 Таблица материалов - редактируемый столбец при добавлении новой строки и сохранении изменений - [ngIf..else также не работает]

Question

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

использую таблицу материалов, где успешно заполняю данные api. я хочу отредактировать конкретный столбец, чтобы изменить значение при добавлении пользователем новой строки и сохранить ее в локальном хранилище.

демо-блиц

в приведенном выше примере, какой класс таблицы матов я должен использовать в addNewRow()

сниппеты:

this.isColumnEditable  = false;
     addNewRow() {
        let data: Element[] = [];
        if (this.table.dataSource) {
          data = (this.table.dataSource as Element[]);
        }
        data.push(ELEMENT_DATA[data.length]);
        this.table.dataSource = data;
        this.isColumnEditable  = true;
        this.table.renderRows();
      }
    }

после редактирования в новой строке, мне нужно сохранить то же самое вместе с существующим источником данных

upadted 1

на основе флага я просто заменяю столбец таблицы на редактируемое поле ввода, но выдает ошибку.

<ng-container matColumnDef="title">
                <th mat-header-cell *matHeaderCellDef> naming list </th>
                <td mat-cell *matCellDef="let element"> {{element.title}} </td>
              </ng-container>

              <ng-container *ngIf = 'isColumnEditable == true' matColumnDef="title">

                <mat-cell *matCellDef="let element">
                  <mat-form-field floatLabel="never">
                    <input [value]="element.title" [(ngModel)]="element.title">
                  </mat-form-field>
                </mat-cell>
              </ng-container>

Ошибка: ERROR Error: Duplicate column definition name provided: "title".

обновлено: 2 [попытка с * ngIf..else] не удалась

<ng-container *ngIF = 'isisColumnEditable == true; else shownormalColumn'>
                <th mat-header-cell *matHeaderCellDef> List of Values </th>
                <td mat-cell *matCellDef="let element"> 
                    <mat-cell *matCellDef="let element">
                        <mat-form-field floatLabel="never">
                            <input [value]="element.title" [(ngModel)]="element.title">
                        </mat-form-field>
                    </mat-cell>
                </td>
            </ng-container >

            <ng-template #shownormalColumn matColumnDef="title">
                <th mat-header-cell *matHeaderCellDef> List of Values </th>
                <td mat-cell *matCellDef="let element"> {{element.title}} </td>
            </ng-template>

Примечание: я не хочу, чтобы пользователь редактировал существующие данные, но должен редактировать (in-line) только для вновь добавленного столбца.