I'd like to have an if statement that determines whether or not an element gets added to the DOM. But since ngIf is an attribute it has to be attached to an element and that element is always added to the DOM even when it evaluates to false.
Is there another way to do this in Angular?
ng-if, when evaluated to false, indeed removes that element and all of its children elements, handlers, etc from the DOM.
Your concern that the element will still be there in DOM if the expression is false, happens with ng-show/ng-hide. (not with ng-if).
You can have a simple test for this. Create a webpage containing ng-if="false", and try using getElementById or jQuery's $("#someId"), you will not get the desired element from these selectors.
For further explanations, When to favor ng-if vs. ng-show/ng-hide?
