Content briefly rendering then disappearing using ng-if

Question

I have some content on my page which is wrapped in an ng-if like below:

            <div ng-if="ShowMessgae" class="text-danger">
                <p>
                    <strong>
                        Message displayed to User
                    </strong>
                </p>
            </div>

Then in my angular js controller I have the following:

function MyController($scope, $q, notifyHelper) {
    openAjaxLoaderGif();

    $scope.ShowMessgae = false;

    MyService.getVarsFromSession().then(function (result) {
       // some code removed for brevity
       if(some coditional) {
        $scope.ShowMessgae = true;
       }

        }, function (data, failReason, headers) {
            notifyHelper.error("Error has occurred - try again");
        })
    })
    .finally(function () {
        closeAjaxLoaderGif();
    });
};

I am setting the value of ShowMessage to false and it only is true if a certain condition is met. In the majority of instances ShowMessage will be false. However this results in when the page loads the markup Message displayed to User briefly renders and then it disappears (to show what I expect) - is there something I am doing wrong which is causing this flicker?

Possible duplicate of [Angularjs - Hide content until DOM loaded](http://stackoverflow.com/questions/18133319/angularjs-hide-content-until-dom-loaded) — Sam Hanley, Jan 11 '17 at 14:07

lealceldeiro · Accepted Answer · 2020-01-24T15:14:11.947

7

This happens because the content is rendered until AngularJS detects that ShowMessgae is false and then hides it.

In order to not show the content at all until angular is ready to "say" whether ShowMessgae is true or false you should use ng-cloak. This way the content is not shown until AngularJS "knows" the value of ShowMessgae. Then, at this point, the framework is ready to show (or not) the content, depending on the value of ShowMessgae

<div ng-if="ShowMessgae" class="text-danger" ng-cloak>
    <p>
        <strong>
            Message displayed to User
        </strong>
    </p>
</div>

edited Jan 24 '20 at 15:14

answered Jan 11 '17 at 14:16

lealceldeiro

14,342
6
49
80

2

I have doubts here, the explanation of ng-cloak is correct, however ng-if will remove elements from the DOM, and ng-show/ng-hide does not remove the elements from the DOM, It uses CSS styles to hide/show elements. Then my doubt is why it gets rendered in case of ng-if ? – Vinay Sinha Jan 11 '17 at 14:21
3

Initially the content is "rendered" in the html (angular isn't ready). When angular evaluates the expression inside the `ng-if` it detects that is falsy, so it removes the content from the html (but this sequence causes the flicker), so if we use `ng-cloak` the content is not shown initially (but it is in the html hidden with css, you are right) then when angular evaluates the expression the content is removed, but this way it was never shown in the first place since it was already hidden by css. (The final user doesn't care whether the content is hidden with css or removed from DOM ;) ) – lealceldeiro Jan 11 '17 at 14:29
Thank you for the depth view :) – Vinay Sinha Jan 11 '17 at 14:37

score 0 · Answer 2 · answered Jan 11 '17 at 14:15

0

add ng-cloak like below

<div ng-if="ShowMessgae" class="text-danger" ng-cloak>
   <p>
     <strong>
         Message displayed to User
     </strong>
   </p>
 </div>

answered Jan 11 '17 at 14:15

Vinay Sinha

193
2
13

Content briefly rendering then disappearing using ng-if

2 Answers2

Linked