Skip to content

Wrapper implementation for portals from @angular/cdk.

Notifications You must be signed in to change notification settings

mrohmer/ng-portal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d431147 Â· Feb 8, 2022

History

15 Commits
Jan 31, 2021
Jan 26, 2021
Feb 8, 2022
Feb 8, 2022
Jan 26, 2021
Jan 26, 2021
Feb 8, 2022
Feb 8, 2022
Feb 10, 2021
Feb 8, 2022
Jan 26, 2021
Feb 8, 2022
Jan 26, 2021
Jan 26, 2021
Jan 26, 2021
Jan 26, 2021
Feb 8, 2022

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>