angular - How to focus on mat-input on new row added in mat-table

Question

I am stuck on the project and want some help. I have a mat-table and one button. On pressing that button one new row is added to the table with some fields. Now in my mat-table, I have one column called Option text where users need to input text. I want that when the user clicks on Add Option Button and a new row is added, here I want to set focus on column 0 and row last. Each time the user clicks on the button focus should be set to the last row of column 0. I already had code to insert row, what I want is to set focus on the last row.

Here is the picture of my mat-table and button

Here is the code which I tried before but doesn't work.

HTML:

 <ng-container matColumnDef="optiontext">
                        <th mat-header-cell *matHeaderCellDef>Option Text</th>
                        <td mat-cell *matCellDef="let element">
                            <form class="row" *ngIf="element.optionEdit" (keydown.enter)="saveOption(element)" (keydown.escape)="closeOption(element)">
                                    <div class="col-8">
                                        <mat-form-field>
                                            <mat-label>Option Text</mat-label>
                                            <input #input matInput [(ngModel)]="optionText" [ngModelOptions]="{standalone: true}" [placeholder]="optionText" maxlength="150">
                                        </mat-form-field>
                                    </div>
                                    <div class="col-4">
                                        <button mat-icon-button aria-label="Save Icon" [disabled]="!optionText" class="icon_align" (click)="saveOption(element)" matTooltip="Save Option" type="button"><i class="far fa-save fa-lg"></i></button>
                                    </div>
                            </form>
                            <div *ngIf="!element.optionEdit">{{ element.optionText }}</div>
                        </td>
   </ng-container>

Here is the TS file Code:

    @ViewChildren('input') rowInput: QueryList<ElementRef>;
  isAlive: boolean;
  adding: any = false;

 ngAfterViewInit(): void {
    this.rowInput.changes
      .pipe(takeWhile(() => this.isAlive))
      .subscribe(children => {
        //I used a variable adding, because I only want to focus when I want
        //not in any change of the input
        if (this.adding) {
          this.adding = false;
          setTimeout(() => {
            children.last.nativeElement.focus();
          }, 0)
        }
      });
  }

// On click of add option button i used to check is questio type fill in blank or discriptive.
addAnswerOption(): void {
    this.answerOptions.data.forEach(e => {
      if (e.optionEdit) {
        this.saveOption(e);
      }
    })
    this.optionText = '';
    if (this.qtype_id == QUESTION_TYPE.FILL_IN_THE_BLANKS) {
      this.answerOptions.data.push({ optionText: this.optionText, isCorrect: true, optionEdit: true })
      this.adding = true;
    }
    else {
      this.answerOptions.data.push({ optionText: this.optionText, isCorrect: false, optionEdit: true })
    }
    this.answerOptions.filter = '';
    this.spanDisplay();
  }

Answer 1

等待大神答复