Welcome to 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>
Here is my TS code snippet.
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();
}
Whenever I click the "add column" button, a new element gets added to the array and the template refreshes with the addition. My goal is to focus on the newly added element afterward. How can I achieve this? I've attempted to use the following code, but it hasn't been successful.
document.querySelectorAll('.document-columns__list:last-child').focus();