Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to hide a give using AngularJS?

    @abhishek.tiwari.458
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3
    • 0
    • 500
    Comment on it

    Hello Reader's, If you are looking to make some animation effect to hide a div from website then in this blog you can learn how to do this. Hiding any div can done by many ways but by using Angular JS you can put some animation effect in it. So lets get started working on it.

    Step 1 create a simple html page and its code will be go like this:-

    <html>
<body ng-app="ngAnimate">
<h1>Click to hide / show the div: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>

    In the HTML code above you just have to create a blank div and assign a n-hide attribute. This will look up by Angular.
     

    Step 2: Now load the anuglar JS. You can do this from google CDN. and It's code will as below:-

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

    Finally you just need to add some CSS to make it more elegant and it will go like this:-

    <style>
div {
 transition: all linear 0.5s;
 background-color: lightblue;
 height: 100px;
 width: 100%;
 position: relative;
 top: 0;
 left: 0;
}

.ng-hide {
 height: 0;
 width: 0;
 background-color: transparent;
 top:-200px;
 left: 200px;
}

</style>

    When you load this file a simple checkbox will appear and when a user clicks that checkbox the angular will hide the div and ease out animation effect. And you will also notice we have not written any custom code in javascript because Angular is doing this all with itself. The output of the page is shown in attached screenshot below in hiding sequence.

    How to hide a give using AngularJS?
    angular html Animation hide div
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: