Why Angular 2 universal server rendered have angular dynamic attribute?

Question

I try to understand the behaviour of universal server side rendering.

I look the https://github.com/angular/universal-starter/tree/angular-connect project.

My first understanding was that the server side rendered version should be free of all the dynamic html attribute generated by angular and then, angular loads and set its dynamic attribute like it want but transparently for me.

Indeed, I observe that the server side generated index is directly "angular annotated". For example:

<app _ngcontent-wwg-34="">

(The attribute name is not a constant).

Am I right thinking this attribute is server side generated (by nodejs) ?

What is the utility of this attribute?

How is it used client side?

My final goal is to use a java back-end (no nodejs) : Will I have to follow some strategy to generate this kind of attribute and keep them in session or something like that?

Thanks for reading!

Answer 1

The attribute name is not a constant

I don't know what you mean with that. Each components gets a different attribute name. They are unique for each component type. The attribute name should not change for the same component type between reloads.

_ngcontent-wwg-34=""

Each component gets such an attribute with unique names added, and for CSS added to components the selectors are rewritten to only match these attributes. This is used to emulate shadow DOM encapsulation.