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
):
To request for new component, please submit issue or PR
Installation
This package is available on npm registry. Install it with command:
npm install primeng-shadowdom-directives
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,
...
],
})
export class AppModule { }
Then in your component file, apply the directives:
<p-dropdown psdDropdown ...></p-dropdown>
<p-calendar psdCalendar ...></p-calendar>
<button psdTooltip pTooltip="Hello World"></button>
<p-menu psdMenu ...></p-menu>
<p-multiSelect psdMultiSelect ...></p-multiSelect>
You can apply multiple directives in the same component. For example:
<p-calendar psdTooltip pTooltip="Hello World" psdCalendar></p-calendar>
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
Finally start the demo-app:
npm start
Now you can access from browser at: http://localhost:4200