Dart Documentationangular.directiveNgCloakDirective

NgCloakDirective class

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.

The directive can be applied to the <body> element, but typically a fine-grained application is preferred in order to benefit from progressive rendering of the browser view.

ngCloak works in cooperation with a css. Following is the css rule:

[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
}

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ng-cloak directive are hidden. When Angular comes across this directive during the compilation of the template it deletes the ngCloak element attribute, which makes the compiled element visible.

@NgDirective(selector: '[ng-cloak]')
@NgDirective(selector: '.ng-cloak')
class NgCloakDirective {
 NgCloakDirective(dom.Element element) {
   element.attributes.remove('ng-cloak');
   element.classes.remove('ng-cloak');
 }
}

Constructors

new NgCloakDirective(Element element) #

Creates a new Object instance.

Object instances have no meaningful state, and are only useful through their identity. An Object instance is equal to itself only.

docs inherited from Object
NgCloakDirective(dom.Element element) {
 element.attributes.remove('ng-cloak');
 element.classes.remove('ng-cloak');
}