there is an ng-show directive in angular, but is there a ng-render directive? that adds the template of a directive to the dom only when conditions are met?
the problem with ng-show is that it only uses css to hide elements, and since I am creating an enormous list, and I am only displaying the visble elements, I dont want the content of not visible content to be partially rendered.
You can use ng-if or ng-switch. Neither include content unless your conditions are met.
Related
As I know ng-show and ng-hide both are used to Show or Hide the given HTML element. But I was asked a question in an interview, that why do we need ng-hide if we have ng-show. What is the reason that we should favor ng-show over ng-hide or vice versa?
I know the difference between ng-if vs ng-show/ng-hide but Ii want to know the difference between ng-show and ng-hide as the functionality of these two are same.
The reason is simple, it is used to simplify the coding, in most of the scenarios we can easily miss ! in our code and it is also not a good coding practice.
NG-HIDE will be used in the scenario where condition is true most of the times but false in some conditions whereas NG-SHOW will be used in the scenario where condition is false most of the times but true in some conditions.
Both of them will check for truthy values.
The ng-hide directive hides the HTML element if the expression evaluates to true.
ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none.
<element ng-hide="expression"></element>
When used as a CSS class:
<element class="ng-hide"></element>
The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
<element ng-show="expression"></element>
This information was taken from: w3schools-ngHide, w3schools-ngShow
The difference between ng-if and ng-show/ng-hide is,
ng-if - It renders the HTML content if the condition is true, otherwise it does not render any content on DOM.
ng-show/ng-hide - It shows or hides the content of html, which is already present on DOM.
The actual html element is present in DOM, only we are showing or hiding it based on condition.
I am using a datepicker control on my page which is rendered through ng-if dependent on a specific dropdown value.
The problem I'm facing is since at the time of rendering, that datepicker input is not part of DOM, so later when I change the value of dropdown, the datepicker control does not work.
If I use ng-show, I encounter issues in validations.
Any suggestions?
Thanks.
Use ng-show/ng-hide instead of ng-if, because the ng-if directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ng-if evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
More details. please refer this link : what is the difference between ng-if and ng-show/ng-hide
Try "$scope.apply()" after the toggling of ng-if variable.
The code I am working on has this:
<div ng-if="cos.connectMessage" style="text-align: center;" class="ng-scope">
Unable to establish a connection to the localhost server for 5 minutes.</div>
Is there any advantage to using ng-show or ng-if to control the visibility of this message?
ng-show
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. (reference)
ng-if
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. (reference)
Note: When ng-if removes the element it also removes the associated scope for that element and it get recreated when condition turns true.
Advantage
I prefer the use of ng-if specifically when number of watchers bound inside the element is more as it would completely destroy the scope so making the UI a bit faster. But for small elements or elements containing less watchers does cost overhead of removing scope and recreating it.
You can refer this for your solution, already lot of things asked in that
what is the difference between ng-if and ng-show/ng-hide
If you are using ng-if="false" then html content under ng-if will not includ in your html page, but if you are using ng-hide="true" or ng-show="false" then html part includ in your html page but it will only in hidden mode.
I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM
Are there any examples on choosing ng-if over ng-show/ng-hide or vice-versa?
You've already summed it up in your question. If you want to show and hide the DOM depending on a condition, use ng-show. This works well for DOM transitions between workflows, tabs, sections, etc.
<div ng-show="vm.tab == 'products'"></div>
If you only want to conditionally render the DOM if a condition occurs, use ng-if. This is particularly useful for permissions where you aren't interested in exposing any more DOM than necessary.
<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />
If there is some information what you dont want to show to user any how.
You want that user cant see it anyhow even after editing DOM from inspect element then use ng-if otherwise use ng-show.
ng-show renders the dom but if condition is false then element display will be invisible.
`ng-if` renders the `dom` only if condition is true
There are situations when you are force to use ng-show
ex: Consider you are using any jquery plugin which runs on dom ready on any element. If element is getting rendered later when ng-if gets true then jquery will not work. In this case you will be need to use ng-show
I have a custom directive that has to be hidden when my page loads, but later if the user clicks something it shows the directive. However, the ng-hide is placed on a parent node outside the dom node the directive lives on. This directive needs to run some code to place its components, but it has to run it when the parent dom node is shown. How can I get notified the dom has changed and the directive is now being shown so I can run my code to calculate the size?
If I don't hide the directive everything works great. However, if I hide it. It fails to render properly.
So, while ng-show or ng-hide are ok for simple DOM elements, sometimes it's better to use ng-if and basically delay the rendering until the show condition has been met. This will in most cases avoid bad renders that can happen when things are rendering in the background using ng-hide or ng-show.
ng-if was introduced in 1.1.5 and it's basically a simplified ng-switch. It was inspired by Angular-UI's ui-if.