Teleport Content Anywhere In Angular Applications

Sometimes you need to break the top down content projection model in Angular and have the ability to project some Content DOM laterally to sibling component sub trees.

If you've ever been in a position where you needed to show different buttons on a toolbar or sidebar based on a different route , but your binding logic was in a child or sibling component , then you understand the pain.

Let me introduce 🎉🎉🎉   NGX-TELEPORT  🎉 🎉 🎉

<!--This can be anwhere in your App-->
<ngx-teleport to="destination">
  <stuff>...</stuff>
</ngx-teleport>

<!--This can be anwhere in your App-->
<ngx-teleport-outlet name="destination">
</ngx-teleport-outlet>
<!--content will be rendered here-->
<stuff>...</stuff>

It is super simple to use, with only two building blocks :

1. Wrap the content you want to teleport in <ngx-teleport to="milkyway"></ngx-teleport> tags
2. Add <ngx-teleport-outlet name="milkyway"></ngx-teleport-outlet> to any component template where you want to teleport your content

This is especially useful where you have a top level Application Shell with sidebar, toolbar, menu etc and you would like to show different content in let's say the toolbar.

Installation

npm install ngx-teleport

• Just import NgxTeleportModule in the NgModule of which ever components you are using ngx-teleport and ngx-teleport-outlet in

import { NgxTeleportModule } from 'ngx-teleport';

@NgModule({
  //...
  imports: [
    //..
    NgxTeleportModule,
    //..
  ],
})
export class SomeModule {}

Here is a simple StackBlitz to see it in action:

NgxTeleportDemo - StackBlitz

Teleport Content Anywhere in your App

StackBlitz

Have fun and

Happy Engineering!