Initial Focus

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.

Change Theme

Theme

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',
      // Other dialog configuration options
    });
}

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

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Dialog