Skip to content

Commit 5a6b94d

Browse files
committed
refactor(cdk/overlay): add method to programmatically attach/detach overlay directive
Adds methods on the `CdkConnectedOverlay` to allow for manual attachment/detachment, instead of going through change detection.
1 parent e50a73f commit 5a6b94d

File tree

2 files changed

+19
-20
lines changed

2 files changed

+19
-20
lines changed

src/cdk/overlay/overlay-directives.ts

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
106106
private _overlay = inject(Overlay);
107107
private _dir = inject(Directionality, {optional: true});
108108

109-
private _overlayRef: OverlayRef;
109+
private _overlayRef: OverlayRef | undefined;
110110
private _templatePortal: TemplatePortal;
111111
private _backdropSubscription = Subscription.EMPTY;
112112
private _attachSubscription = Subscription.EMPTY;
@@ -251,7 +251,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
251251

252252
/** The associated overlay reference. */
253253
get overlayRef(): OverlayRef {
254-
return this._overlayRef;
254+
return this._overlayRef!;
255255
}
256256

257257
/** The element's layout direction. */
@@ -264,16 +264,13 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
264264
this._detachSubscription.unsubscribe();
265265
this._backdropSubscription.unsubscribe();
266266
this._positionSubscription.unsubscribe();
267-
268-
if (this._overlayRef) {
269-
this._overlayRef.dispose();
270-
}
267+
this._overlayRef?.dispose();
271268
}
272269

273270
ngOnChanges(changes: SimpleChanges) {
274271
if (this._position) {
275272
this._updatePositionStrategy(this._position);
276-
this._overlayRef.updateSize({
273+
this._overlayRef?.updateSize({
277274
width: this.width,
278275
minWidth: this.minWidth,
279276
height: this.height,
@@ -286,7 +283,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
286283
}
287284

288285
if (changes['open']) {
289-
this.open ? this._attachOverlay() : this._detachOverlay();
286+
this.open ? this.attachOverlay() : this.detachOverlay();
290287
}
291288
}
292289

@@ -304,7 +301,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
304301

305302
if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
306303
event.preventDefault();
307-
this._detachOverlay();
304+
this.detachOverlay();
308305
}
309306
});
310307

@@ -411,21 +408,21 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
411408
return null;
412409
}
413410

414-
/** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
415-
private _attachOverlay() {
411+
/** Attaches the overlay. */
412+
attachOverlay() {
416413
if (!this._overlayRef) {
417414
this._createOverlay();
418415
} else {
419416
// Update the overlay size, in case the directive's inputs have changed
420417
this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
421418
}
422419

423-
if (!this._overlayRef.hasAttached()) {
424-
this._overlayRef.attach(this._templatePortal);
420+
if (!this._overlayRef!.hasAttached()) {
421+
this._overlayRef!.attach(this._templatePortal);
425422
}
426423

427424
if (this.hasBackdrop) {
428-
this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
425+
this._backdropSubscription = this._overlayRef!.backdropClick().subscribe(event => {
429426
this.backdropClick.emit(event);
430427
});
431428
} else {
@@ -447,16 +444,16 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
447444
}
448445
});
449446
}
450-
}
451447

452-
/** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
453-
private _detachOverlay() {
454-
if (this._overlayRef) {
455-
this._overlayRef.detach();
456-
}
448+
this.open = true;
449+
}
457450

451+
/** Detaches the overlay. */
452+
detachOverlay() {
453+
this._overlayRef?.detach();
458454
this._backdropSubscription.unsubscribe();
459455
this._positionSubscription.unsubscribe();
456+
this.open = false;
460457
}
461458
}
462459

tools/public_api_guard/cdk/overlay.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,11 @@ export class BlockScrollStrategy implements ScrollStrategy {
4646
export class CdkConnectedOverlay implements OnDestroy, OnChanges {
4747
constructor(...args: unknown[]);
4848
readonly attach: EventEmitter<void>;
49+
attachOverlay(): void;
4950
backdropClass: string | string[];
5051
readonly backdropClick: EventEmitter<MouseEvent>;
5152
readonly detach: EventEmitter<void>;
53+
detachOverlay(): void;
5254
get dir(): Direction;
5355
disableClose: boolean;
5456
get disposeOnNavigation(): boolean;

0 commit comments

Comments
 (0)