Initial Focus

Updated on Sep 10, 2026

You can specify which element receives focus when the Dialog opens.

By default, the Dialog focuses the primary action button when it opens. To change this behavior, set the autoFocusedElement property to a CSS query selector string.

The following example focuses the first input element instead of the default primary button.

Example

View Source

Loading ...

Setting Initial Focus with Services

When you use the DialogService to create Dialog instances dynamically based on user interaction, set the initial focus through the autoFocusedElement property in the DialogSettings object.

ts

constructor(private dialogService: DialogService) {}

public openDialogForm(): void {
    const dialogRef = this.dialogService.open({
      content: UserInfoComponent,
      autoFocusedElement: '#name',
      // You can add other DialogSettings options, such as title or actions.
    });
}

The following example demonstrates setting the initial focus when opening the Dialog through the service.

Example

View Source

Loading ...

Suggested Links

• API Reference of the Dialog