Skip to content

Wrapper implementation for portals from @angular/cdk.

Notifications You must be signed in to change notification settings

mrohmer/ng-portal

Repository files navigation

@rohmer/ng-portal

Portals made easy 😉


Powered by Rohmer NPM Downloads Bundle Size Open Issues

Installation

  1. Install package

    npm install @rohmer/ng-portal --save
    // OR
    yarn add @rohmer/ng-portal
  2. Import the PortalModule in your module.

     import {PortalModule} from '@rohmer/ng-portal';
    
     @NgModule({
       // ...
       imports: [
         // ...
         PortalModule,
       ],
     })
  3. Define host elements to render content to.

    <rp-portal-host slot="any-slot-name"></rp-portal-host>
    <div rpPortalHost="another-slot-name"></div>
    
  4. Define content that should be rendered inside these hosts.

    <ng-template rpPortalSlot="any-slot-name">
        I'm rendered inside the slot called "any-slot-name".
    </ng-template>
    <ng-template rpPortalSlot="another-slot-name">
        I'm rendered inside the slot called "another-slot-name".    
    </ng-template>