April 4, 2023
Category : Angular
How to hide div after some time using AngularJS?
Sometimes we require to do like hide div or text or any tag after some time using AngularJS. In this example i am going to show you how to do it.
AngularJS have $timeout variable, $timeout variable through we can set specific time after hide. We can easily set time for hide or show. In this simple example you can see how it is works.
Bellow example you can see and run 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; }, 4000);
});
</script>
</body>
</html>
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
