AngularJS Tutorial 11 - ng-if Directive

Published: 24 September 2016
on channel: Nisha Singla

5,919

In this tutorial, we are going to learn about ng-if directive in angularJS
Ng-if is a built-in Angular directive for adding and removing content from the DOM. Ng-if is extremely handy for showing and hiding content on a page.

Ng-if, like most built-in directives relies upon evaluating an expression as true or false. In the case of ng-if, if the expression evaluates false, it removes the element from the DOM entirely. If it’s true, the element gets recreated

ng-show directive is also used to show or hide the content based on expression . So what is the difference between ng-if and ng-show directive.
ng-show only show or hide the content on the bases of CSS properties, so it only handle the visibility of the HTML element but that element is still in DOM but in case of ng-if element is entirely created or removed from DOM.
Why ng-if is good to use?
Angular uses a digest loop to watch for changes in an app to make changes in the view or model (two-way data binding). Watches are expensive from a performance standpoint. By removing an element from the DOM, you remove all the watchers on those elements. Having few watches in an app generally allows it to run faster.

To visit my previous video on ng-show/hide .Visit this link
   • AngularJS Tutorial 5 -  ng-hide and ng-show

To check my all videos :    • AngularJS Tutorial 1  -  Introduction

Facebook Page:
  / angularjs4beginners

On this page of the site you can watch the video online AngularJS Tutorial 11 - ng-if Directive with a duration of hours minute second in good quality, which was uploaded by the user Nisha Singla 24 September 2016, share the link with friends and acquaintances, this video has already been watched 5,919 times on youtube and it was liked by 58 viewers. Enjoy your viewing!

2,457