При нажатии клавиши Tab на клавиатуре, как выделить поля в пользовательском интерфейсе, используя Angular 8

Question

Здесь я попробовал это:

<td style="width: 60%" *ngIf="claimResultField.fieldValue != '' && claimResultField.fieldValue != null && claimResultField.category == 'FiledMatch'">    
        <div *ngIf='!editModeName' (dblclick)='editModeName=true' class='cell'>{{claimResultField.fieldName}}</div>
        <!-- <div *ngIf='!editModeName' (dblclick)='editModeName=true' class='cell'>{{claimResultField.FieldName}}</div> -->
        <textarea autosize [minRows]="2" [maxRows]="7" *ngIf='editModeName' class='cellInput' (keydown.enter)='$event.target.blur()'
            [(ngModel)]='claimResultField.fieldName' (focusout)="editModeName=false" ></textarea>
</td>
<td style="width: 40%" *ngIf="claimResultField.fieldValue != '' && claimResultField.fieldValue != null && claimResultField.category == 'FiledMatch'"> 
           <!-- <div *ngIf='!editModeValue' (dblclick)='editModeValue=true' (click)='clickFieldValue(claimResultField.valueBoundaries)' class='cell'>{{claimResultField.fieldValue}}</div> -->
           <div *ngIf='!editModeValue' (dblclick)='clickFieldValue(claimResultField.valueBoundaries)' class='cell'>{{claimResultField.fieldValue}}</div>
           <!-- <div><i class="fa fa-trash"
           style="color:#dc3545;font-size: 20px;float: right;"
           aria-hidden="true"></i></div> -->
        <textarea id={{ResultIndex}}  autosize [minRows]="5" [maxRows]="7" *ngIf='editModeValue' class='cellInput focusElement' (keydown.enter)='$event.target.blur()'
            [(ngModel)]='claimResultField.fieldValue' tabindex={{ResultIndex+1}}    (focusout)="focusout()" (change)="resultChange(claimResultField, getClaimData, ResultIndex)"></textarea>
</td>

Answer 1

Чтобы выделить выбранные формы ввода, используйте селектор css :focus.

input:focus {
  outline-color: blue;
}