@ea-controls/portal
v18.0.1
Published
The Portal component facilitates moving HTML content from one component (Component A) to another (Component B).
Downloads
27
Maintainers
Readme
Portal
The Portal component facilitates moving HTML content from one component (Component A) to another (Component B).
Demo
Check out the demo on StackBlitz: Demo
Dependencies
- @angular/[email protected]
Installation
npm i @ea-controls/portal
Instructions
Modules
Import the PortalComponent
and PortalContentComponent
from @ea-controls/portal
in your TypeScript file:
import { PortalComponent, PortalContentComponent } from '@ea-controls/portal';
Usage
ea-portal
In Component A, define the global position where content will be moved:
<!-- Parent Component -->
<ea-portal name="my-name" />
Alternatively, you can use a <div>
approach:
<!-- Parent Component -->
<div ea-portal name="my-name" />
ea-portal-content
In Component B, specify the content to be shown in the global position identified by the same name
attribute:
<ea-portal-content name="my-name">
My child content
</ea-portal-content>
Note: The
name
attribute must be identical in both the parent and child components to share content effectively.