I would like to write a component in Angular 2 that displays and highlights HTML code. It should be possible to write the HTML code without needing to escape tags with < and such.
In the end I would like to write something like this:
<my-code-component>
<span (click)="test()">My test code</span>
</my-code-component>
It should be displayed in the browser like this:
<span (click)="test()">My test code</span>
So the raw HTML code should be shown as is.
In Angular 1, the way to do it would be to register a pre-compile function in a directive, so that it can retrieve the content of the element before it has been compiled by angular. In Angular 2, all I can find is AfterViewInit, which is only executed after the code is already compiled, so the (click) attribute is missing from innerHTML.
Is there any such thing as a pre-compile function in Angular 2?
Another thing that I have discovered is the ngNonBindable attribute. It is supposed to prevent Angular 2 from compiling the element. However, even testing it like this:
<div ngNonBindable>
<span (click)="test()">My test code</span>
</div>
does not work. Instead, it throws lots of InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name. errors, which seems to be related to this bug in the DOM specification.
Is this a bug in Angular 2, or am I doing something wrong?