Question

86

html element inside ng-if appear when the page is loading

rated 0 times [ 89] [ 3] / answers: 1 / hits: 15306 / 9 Years ago, mon, february 9, 2015, 12:00:00

On my page I have a div inside ng-if when there is a number of scripts to load ,i.e when the page is not fully loaded.The div is visible. How do I hide it unless page/angular is fully loaded.

<div  id = menu  ng-if=someCondition >

    <ul class=user-menu>

        <li>

            menu item 1 

        </li>

        <li>

            menu item 2 

        </li>

    </ul>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yaquelina

Add To Favorites

Follow

Total Points: 517

Total Questions: 101

Total Answers: 96

Location: Egypt

Member since Tue, Jul 6, 2021

3 Years ago

yaquelina questions

1 Unable to access process variable in Vue3JS Vite project

Sun, Feb 13, 22, 00:00, 2 Years ago

1 How to return an array of unique objects based on the id of the object in es6?

Mon, Dec 27, 21, 00:00, 2 Years ago

1 How to run nodemon + forever in the background

Tue, Jun 2, 20, 00:00, 4 Years ago

1 How to remove warning in React native

Sun, Mar 8, 20, 00:00, 4 Years ago

1 Angular 9 - You must pass in a NgModule or NgModuleFactory to be bootstrapped

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 9 Years ago aidan · Accepted Answer

Take a look at the documentation for ng-cloak.

From the documentation:

The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.

Also:

The directive can be applied to the element, but the preferred
usage is to apply multiple ngCloak directives to small portions of the
page to permit progressive rendering of the browser view.

<div  id = menu  ng-if=someCondition ng-cloak>

    <ul class=user-menu>

        <li>

            menu item 1 

        </li>

        <li>

            menu item 2 

        </li>

     </ul>

 </div>

How it works:

The following styles are applied to the document (the angular.js file is essentially acting as a .css file) when angular.js is loaded (which is recommended to be in the head of your page). When angular actually runs on DOM load, it removes the ng-cloak attribute, uncloaking the elements.

[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {

  display: none !important;

}

If you don't load angular in the head of your document, then you can add the styles manually to the head and everything will still work. Just add

<style type=text/css>

    [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {

        display: none !important;

    }

</style>