Primeng pTooltip loop

Question

I try to display a list of string in a pTooltip with an ngFor.

<div pTooltip="Liste: <span *ngFor='let code of {{codes}}'>{{code}}</span>" [escape]="false"></div>

or

<div pTooltip="Liste: <ng-template ngFor let-code [ngForOf]="codes"><span>{{code}}</span></ng-template>" [escape]="false"></div>

Thinking with [escape]="false" will be ok but i have nothing.

Anyone have an idea please ?

Thank you

Answer 1

You can show HTML content in pTooltip by setting [escape]="false" and using property binding with pTooltip like this way [pTooltip]. I have used <span> tag in this example , you can also use <ul> to show a list of strings.

Here is the full working code :

Component.ts file :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  isDisabled = false;
  isTooltipDisabled = false;
  codes:any[] = ['test1','test2','test3'];
    disable() {
        this.isTooltipDisabled = true;
        this.isDisabled = true;
    }

    showList():string{

      let temp:string = ``;
      for(let code of this.codes){
        temp+=`<span>${code}</span><br>`;
      }

      return temp;
    }

}

component HTML:

<h2>PrimeNG Issue</h2>

<div>     
    <div [pTooltip]="showList()" [escape]="false" tooltipPosition="bottom">This is sample</div>

</div>

I have used property binding with pTooltip to show the return value of method showList() as HTML string.

Here is a working example :

Plunker demo