Skip to content

Commit 622152d

Browse files
authored
perf(material/tooltip): Defer injection of injectables not needed until tooltip is shown. (angular#30440)
1 parent bb2829d commit 622152d

File tree

1 file changed

+13
-15
lines changed

1 file changed

+13
-15
lines changed

src/material/tooltip/tooltip.ts

+13-15
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,7 @@ const MAX_WIDTH = 200;
187187
},
188188
})
189189
export class MatTooltip implements OnDestroy, AfterViewInit {
190-
private _overlay = inject(Overlay);
191190
private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
192-
private _scrollDispatcher = inject(ScrollDispatcher);
193-
private _viewContainerRef = inject(ViewContainerRef);
194191
private _ngZone = inject(NgZone);
195192
private _platform = inject(Platform);
196193
private _ariaDescriber = inject(AriaDescriber);
@@ -209,7 +206,6 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
209206
private _positionAtOrigin: boolean = false;
210207
private _disabled: boolean = false;
211208
private _tooltipClass: string | string[] | Set<string> | {[key: string]: any};
212-
private _scrollStrategy = inject(MAT_TOOLTIP_SCROLL_STRATEGY);
213209
private _viewInitialized = false;
214210
private _pointerExitEventsInitialized = false;
215211
private readonly _tooltipComponent = TooltipComponent;
@@ -362,9 +358,6 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
362358
private readonly _passiveListeners: (readonly [string, EventListenerOrEventListenerObject])[] =
363359
[];
364360

365-
/** Reference to the current document. */
366-
private _document = inject(DOCUMENT);
367-
368361
/** Timer started at the last `touchstart` event. */
369362
private _touchstartTimeout: null | ReturnType<typeof setTimeout> = null;
370363

@@ -462,7 +455,8 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
462455
const overlayRef = this._createOverlay(origin);
463456
this._detach();
464457
this._portal =
465-
this._portal || new ComponentPortal(this._tooltipComponent, this._viewContainerRef);
458+
this._portal ||
459+
new ComponentPortal(this._tooltipComponent, this._injector.get(ViewContainerRef));
466460
const instance = (this._tooltipInstance = overlayRef.attach(this._portal).instance);
467461
instance._triggerElement = this._elementRef.nativeElement;
468462
instance._mouseLeaveHideDelay = this._hideDelay;
@@ -512,12 +506,14 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
512506
this._detach();
513507
}
514508

515-
const scrollableAncestors = this._scrollDispatcher.getAncestorScrollContainers(
516-
this._elementRef,
517-
);
509+
const scrollableAncestors = this._injector
510+
.get(ScrollDispatcher)
511+
.getAncestorScrollContainers(this._elementRef);
512+
513+
const overlay = this._injector.get(Overlay);
518514

519515
// Create connected position strategy that listens for scroll events to reposition.
520-
const strategy = this._overlay
516+
const strategy = overlay
521517
.position()
522518
.flexibleConnectedTo(this.positionAtOrigin ? origin || this._elementRef : this._elementRef)
523519
.withTransformOriginOn(`.${this._cssClassPrefix}-tooltip`)
@@ -537,11 +533,11 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
537533
}
538534
});
539535

540-
this._overlayRef = this._overlay.create({
536+
this._overlayRef = overlay.create({
541537
direction: this._dir,
542538
positionStrategy: strategy,
543539
panelClass: `${this._cssClassPrefix}-${PANEL_CLASS}`,
544-
scrollStrategy: this._scrollStrategy(),
540+
scrollStrategy: this._injector.get(MAT_TOOLTIP_SCROLL_STRATEGY)(),
545541
});
546542

547543
this._updatePosition(this._overlayRef);
@@ -874,7 +870,9 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
874870
/** Listener for the `wheel` event on the element. */
875871
private _wheelListener(event: WheelEvent) {
876872
if (this._isTooltipVisible()) {
877-
const elementUnderPointer = this._document.elementFromPoint(event.clientX, event.clientY);
873+
const elementUnderPointer = this._injector
874+
.get(DOCUMENT)
875+
.elementFromPoint(event.clientX, event.clientY);
878876
const element = this._elementRef.nativeElement;
879877

880878
// On non-touch devices we depend on the `mouseleave` event to close the tooltip, but it

0 commit comments

Comments
 (0)