bug(COMPONENT): matTabContent tabs are in rootzone io angular zone

[Anderman]

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

19.1.3

Description

button click events from the html are in the rootzone.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xdk6w73f
Steps to reproduce:

1. click tab 2 -HTTP error (Tab 2) // error will not be logged on the console by the global error handler
2. click tab B -HTTP error (Tab B) // error will be logged on the console by the global error handler

Expected Behavior

Error should be logged with the global error handler.
matTemplate should run under angular zone

Actual Behavior

click tab 2 -HTTP error (Tab 2) // error will not be logged on the console by the global error handler
click tab B -HTTP error (Tab B) // error will be logged on the console by the global error handler

Environment

stackblitz
Angular CLI: 20.3.1
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64

[crisbeto]

This sounds like a framework issue. The tabs basically just call into ViewContainerRef.createEmbeddedView under the hood.

[JeanMeche]

It looks like the template instantiated by createEmbeddedView() use the zone it was invoked in and tab explicitly run outside of the Zone when instantiating the another tab body.

components/src/material/tabs/tab-body.ts

Lines 223 to 231 in 962a60c

	const element = this._elementRef.nativeElement;
	const transitionDone = (event: TransitionEvent) => {
	if (event.target === this._contentElement?.nativeElement) {
	this._elementRef.nativeElement.classList.remove('mat-tab-body-animating');
	// Only fire the actual callback when a transition is fully finished,
	// otherwise the content can jump around when the next transition starts.
	if (event.type === 'transitionend') {
	this._transitionDone();

[crisbeto]

Ah, I see. Will transfer this back to Components.