How we can show div after some time using AngularJS?

Today now in this post i will show you How to hide div after some time using AngularJS? Sometimes we need to do like hide any div or text or any tag after the some time by using AngularJS. Now in this example i am going to show you how we can do it.

We know in AngularJS has $timeout variable, by using $timeout variable we can set the specific time after hide. We can easily set the time for hide or show. Now in this simple example we can see how it is working.

So in the bellow example we can see and run the bellow file in your machine.

Example:
<!DOCTYPE html>
<html>
<head>
	<title>Angularjs ng-hide div after few seconds</title>
	<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app = "mainApp" ng-controller = "myController">
		<p ng-hide="isCheck" style="background:red;padding:5px;">{{ myText }}</p>
        </div>
    <script>
            var mainApp = angular.module("mainApp", []);
	    mainApp.controller('myController', function($scope, $timeout) {
	      	$scope.myText = "This is for example";
	      	$scope.isCheck = false;


	      	$timeout(function () { $scope.isCheck = true; }, 20000);
	    });
  </script>
</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.