Primeng Shadowdom Directives

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

Installation

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

Usage

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 -->

Demo

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