单击另一个后命名组件的调用方法

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>

The <tooltip-icon> has public method showMessage() and I want to call it when someone click on user name. The problem is that when I click on <span> then inside method showTooltip the tooltipMsg==undefined allways. So how to get access to showMessage() after click on <span> ?

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 ?