bug(COMPONENT): Angular ARIA tab must allow eager loading of tab content #33950

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Description

Angular Aria's tabs implementation appears to require tab panel content to be declared using ng-template[ngTabContent], which prevents consumers from eagerly rendering tab panel content in the DOM.

This is problematic for use cases where all tab panels need to be initialized upfront, rather than lazily instantiated when their associated tabs become active. For example, a tab panel may contain a component that needs to initialize early, or preload data that is required for SEO (in SSR setup).

Currently, ngTabContent can only be applied to an ng-template, and the implementation warns when a tab panel does not contain the expected content directive. Applying ngTabContent directly to a component or a regular element does not work because it does not match the directive's selector.

It would be useful to provide a supported way to eagerly instantiate tab panel content while retaining the existing tab panel API and accessibility behavior.

Reasoning

The WAI-ARIA Authoring Practices Guide recommends automatic tab activation on focus when the associated panel can be displayed without noticeable latency. It also notes that this typically requires panel content to be preloaded; otherwise, automatic activation introduces delays that significantly hinder efficient keyboard navigation.

Eager loading is therefore a legitimate use case for accessible tabs, particularly when panel content requires initialization or data fetching before it can be displayed.

Providing an explicit mechanism for eager content instantiation would allow developers to avoid unnecessary delays during tab navigation without having to implement their own tab behavior or work around the current content directive requirements.

Reproduction

Link: https://angular.dev/guide/aria/tabs#example-1

Expected Behavior

I expect the ngTabContent to have a selector on its own without the ng-template infront, so that the tab content can be eagerly loaded

Actual Behavior

The ngTabContent selector has ng-template in front of it which prevents us from eagerly loading tab content that may contain useful information and is needed upfront and without layout shift

Environment

• Angular: latest
• CDK/Material: N/A
• Browser(s): latest
• Operating System (e.g. Windows, macOS, Ubuntu): N/A