Initial Focus

Updated on Sep 10, 2026

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

By default, the Window focuses its close 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 within the Window component.

Example

View Source

Loading ...

Setting Initial Focus with Services

When you use the WindowService to create Window instances dynamically based on user interaction, set the initial focus through the autoFocusedElement property in the WindowSettings object.

ts

constructor(private windowService: WindowService) {}

public openWindowForm(): void {
    const windowRef = this.windowService.open({
      content: UserInfoComponent,
      autoFocusedElement: '#name',
      // You can add other WindowSettings options, such as title or htmlAttributes.
    });
}

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

Example

View Source

Loading ...

Suggested Links

• API Reference of the Window