Dynamic classes in CSS and HTML using Angular 9?

Many of you have seen code like this:

where, instead of the human-understandable classes that use the hash.
Google for example uses this technique.

How to implement it using Angular, so classes were out of sync between the html and scss?
April 7th 20 at 10:51
2 answers
April 7th 20 at 10:53
With the standard settings, angular adds HTML elements the component its label, type _nghost-lli-c18 or _ngcontent-rja-c18
All styles of the component automatically adds this PostScript, for example in the browser will look like
a[_ngcontent-rja-c18] {
 color: red;

In Angular it's called "encapsulation styles" is the default behavior and can be turned off or changed to use ShadowDOM.
Therefore, the styles of the component are imposed only on the labels in the component. There is something separate sync is not necessary.
Thanks for the reply! - pamela80 commented on April 7th 20 at 10:56
April 7th 20 at 10:55
Well, you don't have to do it. Time angular collects and inserts dynamic classes/ID tags, it will collect the styles for them. In this case, you use css-in-js, which makes it possible to generate krakozyabry(names of classes). And if you want set the item style with the css file, simply add in hypertext markup language corresponding class manually(well, according to the canons of angular, of course)
Sorry, but I do not understand from Your reply.
Where does "Time angular collects and inserts dynamic classes/ID tags.."
He is not able to do out of the box. - pamela80 commented on April 7th 20 at 10:58
As I understand this should be done at the level of webpack-and - pamela80 commented on April 7th 20 at 11:01
@pamela80, Yes. I was referring to. Sorry, apparently tired. - lavada commented on April 7th 20 at 11:04

Find more questions by tags CSSAngularHTML