Ole Ole - 8 months ago 38
CSS Question

What is the purpose of [ng\:cloak] [ng-cloak] selectors (Contained in Spring Boot Security Tutorial)?

I'm going through a spring boot tutorial and it contains an example with the following css:

<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;

<body ng-app="hello">
<div class="container">
<div ng-controller="home" ng-cloak class="ng-cloak">

I undestand what the cloak class is for. I'm just wondering what the purpose of the first two strange looking selectors is?



From angular 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.

It is done by adding the css rule that you mentioned to the page, where [ng-cloak] - is an attribute selector that matches the elements by attribute rather than class, id, or element name:

<div ng-cloak>...</div>