Portal

The Portal component facilitates moving HTML content from one component (Component A) to another (Component B).

Dependencies

• @angular >= 19.x.x

Installation

npm i @ea-controls/portal

Instructions

Modules

Import the PortalMasterDirective and PortalSlaveDirective from @ea-controls/portal in your TypeScript file:

import { PortalMasterDirective, PortalSlaveDirective } from '@ea-controls/portal';

Usage

Register

1. Go to app.config.ts and add provideEaPortal()

Master Portal

In Component A, define the global position where content will be moved:

<!-- Parent Component -->
<ng-container *portalMaster="'my-name'" />

Slave Portal

In Component B, specify the content to be shown in the global position identified with same Master portal name attribute:

<ng-container *portalSlave="'my-name'">
    My child content
</ng-container>

Note: The name attribute must be identical in both the parent and child components to share content effectively.

Example

// app.config.ts

import { provideEaPortal } from '@ea-controls/portal';

export const appConfig: ApplicationConfig = {
  providers: [
    //...,
    provideEaPortal()
  ]
};

// app.component.ts

import { Component, signal } from '@angular/core';
import { PortalMasterDirective, PortalSlaveDirective } from '@ea-controls/portal';

@Component({
  selector: `app-child`,
  template: `child works
  <ng-container *portalSlave="'title'">
    Child title
  </ng-container>
  `,
  standalone: true,
  imports: [PortalSlaveDirective]
})
export class ChildComponent { }


@Component({
  selector: `app-child2`,
  template: `child 2 works
  <ng-container *portalSlave="'title'">
    Child title 2
  </ng-container>

  <ng-container *portalSlave="'buttons'">
    <button>222</button>
  </ng-container>
  `,
  standalone: true,
  imports: [PortalSlaveDirective]
})
export class ChildComponent2 { }

@Component({
  selector: 'app-root',
  imports: [PortalMasterDirective, ChildComponent, ChildComponent2],
  template: `
  <h1 style="border: solid thin green;">
    <ng-container *portalMaster="'title'" />
  </h1>

  <div style="border: solid thin blue;" *portalMaster="'buttons'"></div>

  <button (click)="toggleChild()">toggle child</button>

  <div style="border: solid 2px red;">
    @if (show1()) {
    <app-child />
    } @else {
    <app-child2 />
    }
  </div>`
})
export class AppComponent {

  show1 = signal(true);

  toggleChild() {
    this.show1.update(v => !v);
  }
}