I am facing problem using *ngIf and (click) on the same element in Ionic 2


I have some show-hide logic in the *ngIf directive and another method on the click event. But the click event is not firing though the element works on the *ngIf expression. And if I remove the *ngIf expression, click works . Previously in Ionic 1, I could handle it very well with ng-show , ng-hide and ng-click . Any idea what I am missing here ?


ng-show does something different to ngif --> ngif removes the whole element from the DOM. ng-show only hides the element and it stays in the dom

in angular2 you do not need ng-show because you can update dom properties directly

<div [hidden]="shouldBeHidden">Hide if `shouldBeHidden` is truthy</div>

<!-- or -->

<div [style.display]="shouldBeVisible ? 'inherit' : 'none'"></div>

But the click should work, if you *ngIf condition is resolved to truthy.
So if your element is visible your click handler should work!


thanks for your reply. Actually the required logic is,after the click event, some operation is executed in the controller and the element should be hidden . So to hide it , the *ngIf should be resolved to false , but the click does not work then . I had to solve it another way by putting some logic in the method called in click , and hid the element with document.getElementById(“element-id”).style.display = ‘none’; this way , *ngIf is not resolved to false and so the DOM does not get removed too , and the click eventually works … :slight_smile:


please do not do those stuff in a component class…