AngularJS ngif Directive (original) (raw)
Last Updated : 01 Aug, 2022
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM.
Syntax:
Contents...Parameter Value:
- expression: It will return false if an expression completely removes the element, & returns true if a copy of the element will be inserted instead, or the element will be created.
Example 1: This example changes the content after clicking the button.
HTML
<!DOCTYPE html>
< html >
< head >
`` < title >ng-if Directive</ title >
`` < script src =
`` </ script >
</ head >
< body ng-app = "geek" style = "text-align:center" >
`` < h1 style = "color:green" >
`` GeeksforGeeks
`` </ h1 >
`` < h2 >ng-if Directive</ h2 >
`` < div ng-controller = "app as vm" >
`` < div ng-if = "!vm.IsShow" >
`` < input type = "button"
`` class = "btn btn-primary"
`` ng-click = "vm.IsShow=!vm.IsShow"
`` value = "Sign in" >
`` < p >Click to Sign in</ p >
`` </ div >
`` < div ng-if = "vm.IsShow" >
`` < button class = "btn btn-primary"
`` ng-click = "vm.IsShow=!vm.IsShow" >
`` Sign out
`` </ button >
`` < p >
`` GeeksforGeeks is the computer
`` science portal for geeks.
`` </ p >
`` </ div >
`` </ div >
`` < script >
`` var app = angular.module("geek", []);
`` app.controller('app', ['$scope', function ($scope) {
`` var vm = this;
`` }]);
`` </ script >
</ body >
</ html >
Output:
Example 2: This example added some content that will render the content when checking the checkbox.
HTML
<!DOCTYPE html>
< html >
< head >
`` < title >ng-if Directive</ title >
`` < script src =
`` </ script >
`` < style >
`` .geek {
`` border: 1px solid black;
`` padding: 10px;
`` font-size: 15px;
`` color: white;
`` width: 50%;
`` background: green;
`` }
`` </ style >
</ head >
< body ng-app style = "padding:30px" >
`` < h1 style = "color:green" >
`` GeeksforGeeks
`` </ h1 >
`` < h3 >ng-if Directive</ h3 >
`` < div >
`` < input type = "checkbox"
`` ng-model = "showDiv" />
`` < label for = "showDiv" >
`` Check it
`` </ label >
`` < br >< br >
`` < div class = "geek" ng-if = "showDiv" >
`` GeeksforGeeks is the computer science
`` portal for geeks.
`` </ div >
`` </ div >
</ body >
</ html >
Output:
Similar Reads
- AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e 2 min read
- AngularJS ng-form Directive The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [ 1 min read
- AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 min read
- AngularJS ng-init Directive The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: <element ng-init = "expression" 1 min read
- AngularJS ng-jq Directive The ng-Jq directive in AngularJS allows forcing the library used by angular.element library. The forcing of jQLite should happen when we leave ng-jq blank, otherwise set the name of the jquery variable under the window (e.g., jQuery). jQLite is directly built into AngularJS and is an important subse 2 min read
- AngularJS ng-focus Directive The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by , , and
- AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 5 min read
- AngularJS ng-keyup Directive The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by , and
- AngularJS ng-include Directive AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes 2 min read
- AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read