Angular CDK Overlay, change default overlay container
Please reference this stackblitz example.
looks like you can accomplish this by extending the
OverlayContainer
class via the following inapp.module.ts
{ provide: OverlayContainer, useFactory: () => new AppOverlayContainer() }
Stackblitz
https://stackblitz.com/edit/angular-material2-issue-ansnt5?file=app%2Fapp.module.ts
This GitHub comment also provides an example of how to package this in a directive
GitHub comment
https://github.com/angular/material2/issues/7349#issuecomment-337513040
Revision 3/22/19 working directive example
Extend the OverlayContainer
class via cdk-overlay-container.ts
Stub the class in app.module.ts
providers: [
{ provide: OverlayContainer, useClass: CdkOverlayContainer },
]
In your cdk-overlay-container.ts
you are preventing the default _createContainer()
from working, and providing your own custom public method myCreateContainer
to replace it.
You are essentially creating an empty
div
here, adding a custom class to itmy-custom-overlay-container-class
and appending it to thediv
the directive is attached to, then passing that container to the private variable_containerElement
in the trueOverlayContainer
class.
/**
* Create overlay container and append to ElementRef from directive
*/
public myCreateContainer(element: HTMLElement): void {
let container = document.createElement('div');
container.classList.add('my-custom-overlay-container-class');
element.appendChild(container);
this._containerElement = container;
}
/**
* Prevent creation of the HTML element, use custom method above
*/
protected _createContainer(): void {
return;
}
Then in your cdk-overlay-container.directive.ts
your are calling myCreateContainer()
and passing the ElementRef
as an argument.
this.cdkOverlayContainer['myCreateContainer'](this.elementReference.nativeElement);
Then in your HTML assign the directive where you want it to show up.
<div myCdkOverlayContainer
Stackblitz
https://stackblitz.com/edit/angular-material2-issue-6nzwws?embed=1&file=app/app.component.html
Related videos on Youtube
vlio20
Updated on September 15, 2022Comments
-
vlio20 over 1 year
Is there a way to change the OverlayContainer?
I have created a tooltip component, but sometimes I want to attach the overlay to a specific element (by default the overlay is attached to the document body).
Here is how I am creating the overlay:
private initOverlay(): void { const positionStrategy = this.overlayPositionBuilder .flexibleConnectedTo(this.elementRef) .withPositions([this.resolvedConfig]); this.overlayRef = this.overlay.create({positionStrategy}); }
And this is how I am attaching a template to it:
show(): void { this.overlayRef.attach(new TemplatePortal(this.tpl, this.viewContainerRef)); }
-
vlio20 about 5 yearsI have a dialog, the tooltip appears behind it (the tooltip trigger is placed on the dialog).
-
-
vlio20 about 5 yearsYes, I saw this suggestion, the problem with this is that I might need to provide the custom OverlayContainer per each instance of the tooltip directive. Seems though there is no other way to achieve this. Would be nice if it would be configurable though.
-
Marshal about 5 yearsAlthough I believe the directive approach may be a solution here, I am having trouble implementing it in stackblitz. Will update answer if I can get it going.
-
Marshal about 5 yearsPlease see revision with directive example.
-
andreivictor about 4 yearsIn the implementation with
myCdkOverlayContainer
directive, all tooltips are attached to the last overlay container (4th). I am missing something here? I thought that is possible to attach different tooltips to different containers. Thanks. -
Marshal about 4 yearsThe implementation is creating a container on each element to calculate the position of the tooltip. But ultimately, because the
OverlayContainer
class is a singleton, the tooltips will be rendered in the last container created. This example was to control the placement of the tooltip/calculate position. -
gyozo kudor over 3 yearsI get this error
TypeError: this.cdkOverlayContainer.myCreateContainer is not a function
. I followed your stackblitz example. Any ideas? -
Chris Peacock over 3 years@gyozokudor I had this problem, it's caused by the directive getting an
OverlayContainer
instance rather than your custom class. It was solved by making my customOverlayContainer
class@Injectable()
.