javascript - Call method of named component after click on another

Question

I have users cards (or list). For users who have status='err' the error icon (<tooltip-icon>) should appear after user name (which is inside <span>). Tooltip first shows icon and on click shows message (this works), but I also want to show this message when someone click on username.

// typescript part:

showTooltip(tooltipMsg, user) {
  if(user.status=='err') {
    tooltipMsg.showMessage();  // here I have undefined
  }
}

<div class="users-cards">
  <div *ngFor="let user of users" class="card"> 
    <span (click)="showTooltip(tooltip, user)">{{ user.name }}</span>
    <tooltip-icon 
      *ngIf="user.status=='err'" 
      [label]="user.msg" 
      #tooltip
    ></tooltip-icon>
  </div>           
</div>

question from:https://stackoverflow.com/questions/65936844/call-method-of-named-component-after-click-on-another

Answer 1

When I do this

    <tooltip-icon 
      [show]="user.status=='err'"
      [label]="user.msg" 
      #tooltip
    ></tooltip-icon>

and implement show @Input param inside tooltip-icon component - then it just works.

However this is only not efficient workaround (because we create extra nodes in DOM) - is there a way to not drop *ngIf ?