angularsyntax-highlightingstring-interpolationhighlightjs

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

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

Solution

  • 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>