无法使用 document.getelementById(id) 将焦点设置在 angular 编辑器上

Question

I am using dyanamic id for angular-editor. But I am unable to set the focus programatically.

I have tried the below code.

document.getElementById(id).focus();

But always occurs this error

ERROR TypeError: Cannot read properties of null (reading 'focus')

Answer 1

Try this.

setTimeout(() => { document.getElementById(id).focus(); }, 500);

Answer 2

Please place it in AfterViewInit

Please use the @ ViewChild()

Answer 3

You need to set a @ViewChild to get access to the HTML element.

<mat-form-field class="form-mat-field ml-5">
            <mat-label class="filter-label">Name</mat-label>
            <input matInput formControlName"name" type="text" #myElement/>
</mat-form-field>

In the HTML mark the element you want to access in the ts Component with for ex. #myElement .

@ViewChild('myElement') firstItem: ElementRef;

....

ngAfterViewInit(): void {
    this.firstItem.nativeElement.focus();
  }

In the component you can then access that marked element with the @ViewChild .