Trigger ng-show after delay

Question

I want to make a div appear 10s after the page has loaded. I would like to use angular.

<div class="appearingitem" ng-show="timeduration"></div>

Any ideas how i might accomplish this? Is there any way to trigger, say a function after a set time? I feel like this should be easy, and i've tried googleing but since i'm new to programming I don't know exactly what I'm looking for

Thank you

Answer 1

$timeout would help you in this case, by executing desired code in callback with specified timeout in milliseconds.

Code

$scope.timeduration = true; //showing some element
$timeout(function(){
    $scope.timeduration = false; //hiding after 10 secs
}, 10000);

Make sure you should inject $timeout dependency on your controller factory function before using it.

Answer 2

angular.module('app', []).
factory('timeduration',function($timeout,$q){
    var timeduration = false;            
    $timeout(function(){//Simulate a request
        timeduration = true;
    },2000);
    return timeduration;
}).
controller('root',function($scope,timeduration){

    $scope.timeduration = timeduration;

});

<div class="appearingitem" ng-show="timeduration">
      // which you want to show here after delay
</div>

div show after 2 sec you can change your time instead of 2000 which you want.

Hope its help to you.

Answer 3

Use the $timeout Service:

https://docs.angularjs.org/api/ng/service/$timeout

$scope.showItem = false
$timeout(function(){
  $scope.showItem = true;
}, 10000); // Time in ms

Answer 4

try this

   $scope.display = function(){
     $scope.timeduration=false; 
     $timeout(function () {
        $scope.timeduration= true;
      }, 10000); 
  }