This component allows rendering all of its content to be rendered elsewhere on the page.
Sometimes a dialog or tooltip has to be rendered outside of an element, as CSS stacking contexts may interfere with positioning.
$ yarn add angular-wormholeImport AngularWormholeModule in your app:
import { NgModule } from '@angular/core';
import { AngularWormholeModule } from 'angular-wormhole';
@NgModule({
imports: [
AngularWormholeModule
]
})
export class AppModule {}index.html
<body>
<my-angular-app></my-angular-app>
<div id="wormhole-target"></div>
</body>In a component template:
<ng-wormhole to="#wormhole-target">
<my-popover>...</my-popover>
</ng-wormhole>The <my-popover> component will then be rendered in the #wormhole-target
element, it will also automatically cleaned up once your component will be
destroyed.
to: selector Which element to append to.
<ng-wormhole to="#wormhole-target">
<my-popover>...</my-popover>
</ng-wormhole>to: selector Which element to append to.
<ng-wormhole [to]="'#wormhole-target'">
<my-popover>...</my-popover>
</ng-wormhole>renderInPlace: boolean = false Should the component render its children in place?
<ng-wormhole to="#wormhole-target" [renderInPlace]="true">
<my-popover>...</my-popover>
</ng-wormhole>This component is heavily inspired by ember-wormhole. Contributions from @stefanpenner, @krisselden, @chrislopresto, @lukemelia, @raycohen and others.