angular-content-portal

A simple library that uses the @angular/cdk library to give a quick way of portaling(?) content outside of your component.

Requirements

• Angular 9+

Demo

StackBlitz demo

Installation

To install this library, run:

$ npm install angular-content-portal --save

Using angular-content-portal

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
import { AngularContentPortalModule } from 'angular-content-portal';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularContentPortalModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

<!-- You can now use your library component in app.component.html -->
<ac-portal-outlet name="header-actions"></ac-portal-outlet>

then

<!-- You can now use your library component in user/create-user.component.html -->
<ac-portal name="header-actions">
  <button>Add user</button>
</ac-portal>

License

MIT © John Cashmore