In this tutorial we will show you the solution of ng-hide in angularjs, here we shown example for ng-hide directive so it will gives idea about how to handle what is the use for users.
When we using this directive it will make anything to hide (i.e not visible on webpage) sometimes when we work with websites we need to same things like in menu bar icon appearance or size hidden to display another icon for look like animations.
Step By Step Guide On Ng-Hide In Angularjs :-
Here we defined example using ng-hide directive in angularjs.
We created checkbox and paragraph when user clicks on checkbox below shown paragraph will disappear because of ng-hide directive in angularjs.
It works by changing ng-hide value to ‘false’ when user clicks on checkbox those are we defined in scope controller.
Ng-hide used to hide the HTML element if the expression is set to true.
<!DOCTYPE html>
<html>
<head>
<title>ng-hide Directive</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myctrl">
<h2>ng-hide Directive</h2>
<input id="chshow" type="checkbox" ng-model="show" />
<label for="chshow">
Hide Paragraph
</label>
<p ng-hide="show">
hide this paragraph using ng-hide
</p>
</div>
<script>
var myapp = angular.module("app", []);
myapp.controller("myctrl", function ($scope) {
$scope.hide = false;
});
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- In controller scope we defined our application and hold by variable ‘myapp’ then controller added to application with $scope object and function defined.
- In function we changing which HTML element has ng-hide directive that’s value changed to ‘false’ so the result of paragraph will disappear.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘app’ it defines our application and controller of application namely ‘myctrl’ by ng-controller directive.
- Header tag <h2> used for describes heading of our concept and then we defined <input> tag with ‘checkbox’ type and ng-model value of ‘show’. The ng-model inserted to html element of input tag for binds input value to the <p> tag ng-hide.
- So when user clicks on checkbox that value it points <p> tag with same name ng-hide directive within controller scope loads to disappear the paragraph.
- The label created for input tag like description and using ‘for’ attribute it labeled with <input> tag by id attribute same value.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to hide html elements using ng-hide directive in angularjs.
In angularjs we can achieve anything too easily but in other languages will takes some time and complexity that’s the advantage.
With the help of ‘ng-hide’ directive we can hide any html elements in angularjs.
We can do the same process to any html elements like button, header tags or div tag.
I hope this tutorial on ng-hide in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
