How to hide div after some time using AngularJS?

By Hardik Savani | September 9, 2016 | | 48992 Viewer | Category : 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
My name is 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, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: