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 ng-wormholeImport NgWormholeModule in your app:
import { NgModule } from '@angular/core';
import { NgWormholeModule } from 'ng-wormhole';
@NgModule({
imports: [NgWormholeModule]
})
export class AppModule {}index.html
<body>
<my-angular-app></my-angular-app>
<div id="wormhole-target"></div>
</body>In a component template:
<my-popover *ngWormhole="'#wormhole-target'">...</my-popover>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.
ngWormhole: selector or element Which element to append to.
<div #targetElement id="my-target"></div>
<my-popover *ngWormhole="targetElement">...</my-popover>
<!-- or by id/selector -->
<my-popover *ngWormhole="'#my-target'">...</my-popover>renderInPlace: boolean = false Should the component render its children in place?
<my-popover *ngWormhole="'#wormhole-target'; renderInPlace: true">...</my-popover>Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
This component is heavily inspired by ember-wormhole. Contributions from @stefanpenner, @krisselden, @chrislopresto, @lukemelia, @raycohen and others.