I am wondering what the difference between ngIf and ng-if is. In some sources I have seen ngIf used and in some sources ng-if used. I know ngIf vs *ngIf. That is not my question so do not get confused with that question. The dash is what I do not understand.
According to Angular documentation, ngIf is an Angular (v +2) directive
, however, ng-if is an AngularJS (v 1.x) directive.
as also mentioned by #rcoro in comments.
Related
I'm using AngularJS ver. 1.6.8.
I have a component I have built called icons. To incorporate it in a page I just add <icons></icons> and the component is inserted into the page.
Now I have a scope variable that holds html, and part of that html is the previously mentioned code <icons></icons>.
When I use ng-bind-html it doesn't compile the component and instead just shows <icons></icons> as text.
I have tried using angular-bind-html-compile (link) but that didn't help.
All of the solutions I found seem to support angular pre made directives and not newly formed components.
Happy to hear of any possible solutions.
Did you do the following on your scope variable which holds the html code? This is a common mistake.
$scope.trustAsHtml('<div>....')
But as mentioned before, without your code it is hard to figure out the problem.
I was thinking which one is faster ng-if or ng-switch? Let's say we have a case: 10 different divs and only one is needed at a time. Is there any difference in speed if ng-switch is used instead of ng-if?
If ng-if is used all the elements will be evaluated separately, but does ng-switch do the same?
Using angular 1.x
Both ng-if and ng-switch create their own scope. So at this point, there is no difference.
In the end, I think it pretty much depends on the use case.
If you have just a couple of elements, it would be probably better to use the ng-switch variant because, as put in my comment, ng-switch has a good chance to avoid matching all possible values as it is not possible in angularjs to create an if / else if / else if / else if clause. Using ng-if, all if conditions are always evaluated.
BUT
Since ng-show leaves the elements alive in the DOM (in contrast to ng-if), it means that all of their watch expressions and performance cost are still there even though the user doesn’t see the view at all. In very large views, that can come with a penalty.
ng-if is a ng-switch itself, the difference is only here that ng-if have only single expression.
so if you have only one expression it's better to use ng-if , otherwise use ng-switch. that's the only thing that you need to consider for using any of them.
Recently I have been coming across a lot of repetition in Angular.
Example:
ngShow vs ngHide
Pristine vs Dirty
valid vs invalid
Won't ng-show="!condition" and ng-show="condition" cover all cases for showing and hiding content within the view?
Having both ngShow and ngHide directive seems in AngularJs as pointless as having an if and an ifNot statement in JavaScript.
Is there a reason for doing this? When should custom directives be written like this?
In AngularJS,
how would I make a HTML exist only if a scope variable is true?
I know there is the ng-show directive but this will not work for me as it will only make it invisible with display: none, but what I need is actually that the element only exists in the DOM when something evaluates.
Something like this would work for me: <div ng-exists="myvar==myothervar"></div>
You can use Angular's ng-if directive (see the docs):
<div ng-if="myvar==myothervar"></div>
https://docs.angularjs.org/api/ng/directive/ngIf
is what you are looking all over
may be what shall give you what you are looking for. Check you angular version though.
Looking at Mastering Web Application Development in Angular, I tried to use the ng-if Directive to not show a <div> if an expression was false.
HTML
<div ng-controller="MyCtrl">
<div ng-if="showSecret">Secret</div>
</div>
JavaScript
var myModule = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.showSecret = (function() {
return false;
})();
}
But, looking at this JsFiddle(http://jsfiddle.net/64GCp/2/), I see that Secret gets rendered. Why?
It looks like you are using v1.0.1 and documentation here doesn't show an ngIf document.
The first instance of it I see is here in version 1.2.0
Changing the library version works: http://jsfiddle.net/64GCp/4/
The version of angular you are using does not support ng-if. Use a newer version. See my fiddlehttp://jsfiddle.net/SdYH5/
The options to hide and show are ng-show or ng-hide and later in version Angularjs 1.2.0+ ngIf
http://jsfiddle.net/64GCp/3/
All directives are executed over the DOM and therefore both ngShow or ngIf will be executed equally.
I have personally used ngShow in a page a large number of times(I decided to used "large number" to highlight the ambiguity) and tested it in all browsers including IE8 with no problems at all.
What the book is probably referring to is that the size of the page will not change because all ngShow/ngHide does is to hide the element:
ng-show output
<div ng-show="showSecret" style="display: none;">Secret</div>
While ngIf only leaves a comment:
ng-if output
<!-- ngIf: checked -->
Important: the first stable version to add ng-if was angular 1.2.0 make sure you have this version or higher before planning to use it.
Please understand 2 things, Angular is rapidly changing framework and so are the browsers it is always a good practice to search for benchmarks/versions to confirm or discard features. It is also possible that the internal functionality of directives may change overtime. For instance Angular Team announced that they dropped IE8 support in version 2.0.