Initial Focus

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.

Change Theme

Theme

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

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

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Window