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

To request for new component, please submit issue or PR

This package is available on npm registry. Install it with command:

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

Other than directives, we also provide helper functions to help fix some other problems related PrimeNG + Shadow dom. See usage below

First assign a ref to p-table

<p-table #dt>

Then access it using ViewChild:

@ViewChild('dt') dt!: Table;

Finally:

// you can call it in ngAfterViewInit or at any later time when you're sure that the view is rendered on screen
ngAfterViewInit() {
  ensureResizableColumn(this.dt, this.el.nativeElement.shadowRoot);
}

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