Set of directives to fix PrimeNg "overlay" components got-chas when rendered inside ShadowDOM
Below are list of components that currently supported (all directives start with prefix psd = PrimeNg ShadowDOM Directive
):
Tip
Once you import this module library, it'll automatically handle most of components (those marked as No directive required), the rest will need to pass directive explicitly
Angular 17 & 18
- Calendar (
psdCalendar
) - Dropdown (No directive required)
- Dropdown inside Paginator (No directive required)
- Menu (
psdMenu
) - Multi Select (No directive required)
- Tooltip (No directive required)
- Auto Complete (No directive required)
- Cascade Select (No directive required)
- Color Picker (No directive required)
- Mega Menu (No directive required)
- Menu Bar (No directive required)
- Confirm Popup (No directive required)
- Overlay Panel (
psdOverlayPanel
) - Slide Menu (
psdSlideMenu
) - Split Button (
psdSplitButton
) - Tiered Menu (
psdTieredMenu
) - Tree Select (No directive required)
- Input Mask (
psdInputMask
)
Angular 16
- Calendar (
psdCalendar
) - Dropdown (No directive required)
- Dropdown inside Paginator (No directive required)
- Menu (
psdMenu
) - Multi Select (No directive required)
- Tooltip (No directive required)
- Auto Complete (
psdAutoComplete
) - Cascade Select (No directive required)
- Color Picker (No directive required)
- Mega Menu (
psdMegaMenu
) - Menu Bar (
psdMenuBar
) - Confirm Popup (No directive required)
- Overlay Panel (
psdOverlayPanel
) - Slide Menu (
psdSlideMenu
) - Split Button (
psdSplitButton
) - Tiered Menu (
psdTieredMenu
) - Tree Select (No directive required)
- Input Mask (
psdInputMask
)
Angular < 16
- Calendar (
psdCalendar
) - Dropdown (
psdDropdown
) - Dropdown inside Paginator (
psdPaginator
) - Menu (No directive required)
- Multi Select (
psdMultiSelect
) - Tooltip (No directive required)
- Auto Complete (
psdAutoComplete
) - Cascade Select (
psdCascadeSelect
) - Color Picker (No directive required)
- Mega Menu (
psdMegaMenu
) - Menu Bar (
psdMenuBar
) - Confirm Popup (
psdConfirmPopup
) - Overlay Panel (
psdOverlayPanel
) - Slide Menu (No directive required)
- Split Button (No directive required)
- Tiered Menu (No directive required)
- Tree Select (
psdTreeSelect
) - Input Mask (
psdInputMask
)
To request for new component, please submit issue or PR
This package is available on npm registry. Install it with command:
# for Angular 18
npm install primeng-shadowdom-directives@^18.0.0
# for Angular 17
npm install primeng-shadowdom-directives@^17.0.0
# for Angular 16
npm install primeng-shadowdom-directives@^1.0.0
# for Angular < 16
npm install primeng-shadowdom-directives@^0.2.2
Import this package into your module where you want to apply these directives (normally will be app.module.ts
)
import { PrimeNGShadowDOMDirective } from 'primeng-shadowdom-directives';
@NgModule({
imports: [
PrimeNGShadowDOMDirective, // import here
...
],
})
export class AppModule { }
Then in your component file, apply the directives:
<!-- dropdown -->
<p-dropdown psdDropdown ...></p-dropdown>
<!-- calendar -->
<p-calendar psdCalendar ...></p-calendar>
<!-- multi select -->
<p-multiSelect psdMultiSelect ...></p-multiSelect>
<!-- and others -->
Check projects/demo-app
to see samples on how to use this package.
To run the demo, first run
npm install
Then build the directives:
npm run build
# watch mode
npm run watch
Finally start the demo-app:
npm start
Now you can access from browser at: http://localhost:4200