How to use Angular library (like PrimeNg) components in gridstack

[AkshayMaestro01]

Issue

I am using gridstack in angular project. It shows all html elements added as widgets in gridstack. But when I try to use PrimeNG component like p-rating, it is not shown in grid-stack-items. I have inspected elements. p-rating is there in grid-stack-item-contents but it has 0x0 dimensions. I have added p-button in items as -

public items: any = [
    {
      h: 2, w:4, content: "<p-rating [(ngModel)]='ratingValue' stars='5'></p-rating>"
    }
];

Same thing happened with me for chartsjs. But after manual initialization, it worked.

Fo p-button, I used angular directive like-

<button pButton ...> </button>

then it worked.

Is there any way to use PrimeNG components in gridstack?

Environment

• version of gridstack.js - 10.1.2
• browser/OS - Chrome/Windows 11

Steps to reproduce

Install angular. Create new project. Install Gridstack, PrimeNG (or Angular Material). Import them. Try to use any component in gridstack.

Expected behavior

It should show angular components (PrimeNG or Material) in gridstack like it does outside gridstack.

[adumesny]

the content field is meant to be generic html content. i'm not sure it can be made to work with angular (or other) frameworks since GS is generic code. I would suggest using ng component by types, as shown in the ng examples, and write a type->component that maps into regular angular templating rather than use html content