This my HTML Template.
<div
cdkDropList
class="document-columns__list list"
(cdkDropListDropped)="dragDrop($event)"
>
<div
cdkDrag
class="list__box"
*ngFor="let column of columns; let i = index"
(click)="selectColumn(column)"
[class.list__box_selected]="column === selectedColumn"
>
<div class="list__placeholder" *cdkDragPlaceholder></div>
<div class="list__content">
<div class="list__name">
{{column.col_num}}. {{column.title}}
</div>
<div class="list__type">
{{getType(column)?.title}}
</div>
</div>
<p-button
class="list__button"
icon="pi pi-trash"
styleClass="p-button-danger p-button-outlined"
[disabled]="columns.length === 1"
(click)="deleteColumn(column)"
></p-button>
</div>
</div>
<div class="document-columns__button">
<p-button
styleClass="p-button-secondary p-button-outlined"
(click)="addNewColumn()"
label="Add column"
icon="pi pi-plus"
iconPos="left"
>
</p-button>
</div>
This my TS code.
public addNewColumn(): void {
const arrayLength: number = this.columns.length + 1;
this.columns.push({
col_num: arrayLength,
type_id: TypeId.Number,
title: 'New Column',
});
this.columnsChanged.emit(this.columns);
this.recalculateColumnNumbers();
}
When I click the add column button. A new element is created in the array. The template is redrawn with a new element. I want to focus on it after that. How to do it? I've tried this code, but it doesn't work.
document.querySelectorAll('.document-columns__list:last-child').focus();