Angular 2+: how to remove all angular attributes and comments (and other angular artifacts) from the HTML code?

Question

I want to utilise Angular in a not really usual way. I use it to generate the HTML that is later on used for various needs.

Why? I want this HTML to be static and in

Answer 1

As far as I am aware, you need to set the ViewEncapsulation to None. Understanding how this works is key, as these dynamically generated classes you do not want are there for the reason of specificity.

According to the Angular 4 documentation:

• Emulated: Provides a surrogate attribute, to allow each component to be absolutely independent, as if it were a Web Component (which is why the dynamic class is being added...again to allow it to be independent due to specificity.
• Native: Will utilise (excuse my British spelling) the Shadow DOM and as far as I am aware, will therefore not generate classes, because it can live independently. However using this may fail in certain browsers which do not support the Shadow DOM.
• None: I believe this is what you need, as it will not "provide any template or style encapsulation" as stated. In other words, you won't see the generated classes. However this could cause encapsulation issues, which is why you may want to avoid it.

To do this, use the following code in your component file (in the component decorator function:

encapsulation: ViewEncapsulation.None