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

Ionic Framework ionic-v3
1

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 ?

2

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!

3

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:

4

please do not do those stuff in a component classā€¦

1 Like