Topic: mdbTooltip: Host already has a portal attached

estalis free asked 2 years ago

*_Expected behavior_*I guess it's supposed to work normally

Actual behavior

Resources (screenshots, code snippets etc.)

<ng-template #infoComplRef let-item="item" let-info="info">
  <a role="button" class="me-1" [mdbTooltip]="info.text" [html]="false" placement="left">
    <fa-icon [icon]="info.icon" [size]="actionIconSize"></fa-icon>

<ng-template #tableActions let-item="item">
      <ng-container [ngTemplateOutlet]="infoComplRef" [ngTemplateOutletContext]="{ item: item, info: getInfoCompl(item) }">

  public getInfoCompl(item: DocumentSignatureView) {
    const icon: IconProp = ['fas', 'circle-info'];
    return {
      text: "Hallo",
      icon: icon

EDIT: If i remove the [icon] binding from fa-icon it seems to work.

<fa-icon [icon]="['fas', 'circle-info']" [size]="actionIconSize"></fa-icon>

what's wrong with it ?

EDIT 2: binding with icon name like this works as well. it doesn't seem to be an issue with MDB.

<fa-icon [icon]="['fas', info.icon]" [size]="actionIconSize"></fa-icon>

  public getInfoCompl(item: DocumentSignatureView) {
    const icon: IconName = 'circle-info';
    return {
      text: "Hallo",
      icon: icon

Michał Duszak staff commented 2 years ago

Hello, does it work properly right now if you changed the binding to the [icon]="['fas', info.icon]"?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.2.0
  • Device: who cares
  • Browser: who cares
  • OS: who cares
  • Provided sample code: No
  • Provided link: Yes