diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts index c95ca6c149bf..7781faf3baa2 100644 --- a/src/material/tabs/paginated-tab-header.ts +++ b/src/material/tabs/paginated-tab-header.ts @@ -24,9 +24,6 @@ import { numberAttribute, Output, ANIMATION_MODULE_TYPE, - afterNextRender, - inject, - Injector, } from '@angular/core'; import {Direction, Directionality} from '@angular/cdk/bidi'; import {ViewportRuler} from '@angular/cdk/scrolling'; @@ -42,7 +39,7 @@ import { timer, fromEvent, } from 'rxjs'; -import {switchMap, startWith, skip, takeUntil, filter} from 'rxjs/operators'; +import {take, switchMap, startWith, skip, takeUntil, filter} from 'rxjs/operators'; import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform'; /** Config used to bind passive event listeners */ @@ -156,8 +153,6 @@ export abstract class MatPaginatedTabHeader /** Event emitted when a label is focused. */ @Output() readonly indexFocused: EventEmitter = new EventEmitter(); - private _injector = inject(Injector); - constructor( protected _elementRef: ElementRef, protected _changeDetectorRef: ChangeDetectorRef, @@ -214,9 +209,9 @@ export abstract class MatPaginatedTabHeader // Defer the first call in order to allow for slower browsers to lay out the elements. // This helps in cases where the user lands directly on a page with paginated tabs. - // TODO(mmalerba): Consider breaking this into multiple `afterNextRender` calls with explicit - // phase. - afterNextRender(realign, {injector: this._injector}); + // Note that we use `onStable` instead of `requestAnimationFrame`, because the latter + // can hold up tests that are in a background tab. + this._ngZone.onStable.pipe(take(1)).subscribe(realign); // On dir change or window resize, realign the ink bar and update the orientation of // the key manager if the direction has changed.