How to automatically close an alert on JHipster?

Question

I have recently discovered and started to develop in JHipster.

One of the first hurdles I'm facing is to close automatically alerts. So far, I have learned that JHipster uses Bootstrap UI alerts, so I'm trying to adapt the alerts bundled in the sample project of JHipster, which are shown in the Home when the user tries to log in (the one in green):

HTML code for alerts was as follows:

        <div ng-switch="vm.isAuthenticated()">
            <div class="alert alert-success" ng-switch-when="true" data-translate="home.logged.message" translate-values="{username: '{{vm.account.login}}'}">
                You are logged in as user "{{vm.account.login}}".
            </div>
        </div>

Which I modified such as this:

            <div class="alert alert-success" ng-switch-when="true" data-translate="home.logged.message" translate-values="{username: '{{vm.account.login}}'}" close="closeAlert()" ng-if="show" dismiss-on-timeout="3000" >
                You are logged in as user "{{vm.account.login}}".
            </div>

Javascript file home.controller.js looks like this:

(function() {
'use strict';

angular
    .module('pruebablogApp')
    .controller('HomeController', HomeController);

HomeController.$inject = ['$scope', 'Principal', 'LoginService', '$state', 'AlertService'];

function HomeController ($scope, Principal, LoginService, $state, AlertService) {
    var vm = this;

    vm.account = null;
    vm.isAuthenticated = null;
    vm.login = LoginService.open;
    vm.register = register;
    $scope.$on('authenticationSuccess', function() {

        getAccount();
    });

    getAccount();

    function getAccount() {
        Principal.identity().then(function(account, $scope) {
            vm.account = account;
            vm.isAuthenticated = Principal.isAuthenticated;

            if (vm.isAuthenticated){
                $scope.show = true;
                }

        });
    }
    function register () {
        $state.go('register');
    }


    function closeAlert () {
        $scope.show = false;
    }
}
})();

This method is not working for me. I've tried other approaches, such as this one or this one (which should work for button clicks).

What am I doing wrong?

Answer 1

JHipster is using AlertService as a service in order create the messages type which you want to create (e.g. info, warning, danger etc.) and the message is displayed with the tag. Have a look at the entities in the sample app to see the tag jhi-alert in action. You just write the tag in the html site and you create in your controller with AlertService the message which you want to create and display.

@Gaël Marziou your answer was more into deep of what is actually happening behind the scene. Can I see it?