1

How to render a primeng component inside a template but, the content coming from a variable?

constructor(
    private sanitized: DomSanitizer
) {}

ngOnInit() {
    this.pButton = this.sanitized.bypassSecurityTrustHtml(
      '<p-button label="I am a button!" pTooltip="text"></p-button>'
    );
}

Inside Template:

<div [innerHTML]="pButton"></div> <!--rendering nothing-->

I tried this approach but not works.

Does anyone know why this happens?

Using Angular and PrimeNg 13

Thanks in advance!

elciospy
  • 260
  • 4
  • 11
  • It looks like using [`ViewChild`](https://stackoverflow.com/questions/58039071/how-can-i-resolve-safehtml-pipe-not-working-in-angular-8) might be the answer to your question – Pytth Mar 10 '22 at 17:43
  • thanks to the fast answer, but not resolve the problem . result is the same. :( – elciospy Mar 10 '22 at 18:13
  • How come it would be even close to beeing the same ;) – Antoniossss Mar 10 '22 at 20:15
  • You cannot pass template just like that, you would have to compile it first (i dunno how to do it) – Antoniossss Mar 10 '22 at 20:15
  • 1
    You can **not**. Angular not compile "at time". you can take an approach like this [SO](https://stackoverflow.com/questions/71071707/dynamically-add-mattooltip-in-text-for-specific-keywords/71072868#71072868) or another, but repeat: inject in innerHtml **not** work (it's impossible) -you can create an angular component like Netanel Basal show in this [link](https://netbasal.com/render-angular-components-using-plain-text-5a6377125bf3)- but it's out of your problem – Eliseo Mar 11 '22 at 09:42
  • How flexible is the content of the variable? Where is it coming from? – Shai Mar 14 '22 at 12:08
  • @Shai The variable comes from service. Is a html text with some links that I need apply pTooltip="text". The replace inside works fine, but doesn't render on screen. – elciospy Mar 14 '22 at 12:33
  • Maybe you don't need to include the `p-button` itself in the variable and only get the various attributes for the `p-button` and pass them in the template. If you make changes after a server call, try injecting a `private changeDetector: ChangeDetectorRef` in your constructor and calling `this.changeDetector.markForCheck()` at the end of the server call callback. – Shai Mar 14 '22 at 13:35
  • 1
    @elciospy, has you check the link to the SO I indicate? it's looks like your problem -the only change is use [matTooltip] instead [p-button] – Eliseo Mar 14 '22 at 14:51
  • @Shai Thank you, but not resolved this.changeDetector.markForCheck() inside subscribe immediatelly after service call. – elciospy Mar 14 '22 at 16:12
  • If you check you inspect your html is inserted you will see its there, but it does not hook up with anything. What you could try is to turn the components you expect yo be used into webcomponents. by using angular elements. It probably comes with a heap of problems, but that might be one direction you could attempt. But i would probably try to find a overall better solution than trying to string parse components into you webapp. – Henrik Bøgelund Lavstsen Mar 16 '22 at 03:19
  • Thank you very so much @Eliseo!!! Your answer help me to resolve the problem! \O/ \O/ \O/ – elciospy Mar 16 '22 at 15:17
  • @elciospy I am facing similar problem, how did you solve it? – Yogen Darji Aug 08 '22 at 04:30
  • Hi @YogenDarji, I used the solution mentioned by Eliseo https://netbasal.com/render-angular-components-using-plain-text-5a6377125bf3 and it works! – elciospy Aug 08 '22 at 07:58

0 Answers0