Angular: is there a way to display raw (original/not compiled) code in a template

Question

In an Angular 8 application, I need to show the original html code without its evaluation (like code snippet).

E.g.

<div #sample>
    {{'standard-button' | translate}}
    <ng-container *ngIf="!clicked">
        {{'not' | translate}}
    </ng-container>
    {{'clicked' | translate}}
</div>

There is a way to get exactly the below html? I'm using highlightJS but unfortunately it evaluates interpolations {{}}.

Thank you in advance

Answer 1

you can use ngNonBindable directive that tells Angular not to compile or bind the contents of the current DOM element.

<div ngNonBindable  #sample>
  {{'standard-button' | translate}}
  <ng-container *ngIf="!clicked">
    {{'not' | translate}}
  </ng-container>
  {{'clicked' | translate}}
</div>

Answer 2

You can store it in a string variable

    private htmlTemplate: string = "<div #sample>
    {{'standard-button' | translate}}
    <ng-container *ngIf='!clicked'>
        {{'not' | translate}}
    </ng-container>
    {{'clicked' | translate}}
</div>"

and use it in the template like:

<div>{{htmlTemplate}}</div>