Angular2 ngcloak un-compiled elements? [duplicate]

Question

AngularJS 1.x has ngCloak directive, which is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form.

Does Angular 2 have any such directive or functionality to prevent such raw(uncompiled) form display.

Answer 1

Angular2 desn' have ngCloak,

instead you can use ?. operator (use it with object).

{{user?.name}}

AND/OR

you can use *ngIf (as of now)

<div *ngIf="name"> {{name}}</div>

Answer 2

There are two types of compilations in Angular2 ,Just-in-Time(JiT) and Ahead-of-Time(AoT). Just-in-Time is the default compilation.

JiT compilation incurs a runtime performance penalty.Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won't actually need. Bigger apps take longer to transmit and are slower to load.

With AoT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

If we go with Ahead-of-Time compilation instead of Just-in-Time compilation, we can prevent such raw(uncompiled) form of display.

This link provides more information

Answer 3

You can prevent rendering of html by using *ngIf until the corresponding object is loaded:

<div *ngIf="dataList">
<>....</>
</div>