CODEWITHSUNDEEP
htmlangular
IgorK
IgorK

Reputation: 144

How to add code snippet to Angular html template?

I would like to show some angular code on web page like

      import { Pipe, PipeTransform } from '@angular/core';

      @Pipe({name: 'reverseStr'})
      export class ReverseStr implements PipeTransform {
          transform(value: string): string {
          let newStr: string = "";
          for (var i = value.length - 1; i >= 0; i--) {
              newStr += value.charAt(i);
          }
          return newStr;
          }
      }

If I just add it as it is (or wrap with ordinary html tags), it breaks the app. How to fix it? Also can I add language-related coloring to the snippet?

Upvotes: 0

Views: 2510

Answers (2)

Joel Joseph
Joel Joseph

Reputation: 6169

You want the normal {{ code }} syntax which will encode the variable for displaying.

Adding code and a pre will style it the way you want (or you can do the same through CSS by setting the CSS of the container to have white-space:pre)

<div><code><pre>{{code}}</pre></code></div>

Upvotes: 0

Flignats
Flignats

Reputation: 1274

You'll need to 'escape' the curly braces.

Example:

            <code>
              import {{ '{' }} Pipe, PipeTransform {{ '}' }} from '@angular/core';

              @Pipe({{ '{' }}name: 'reverseStr'{{ '}' }})
              export class ReverseStr implements PipeTransform {{ '{' }}
                transform(value: string): string {{ '{' }}
                let newStr: string = "";
                for (var i = value.length - 1; i >= 0; i--) {{ '{' }}
                    newStr += value.charAt(i);
                    {{ '}' }}
                return newStr;
                {{ '}' }}
                {{ '}' }}
            </code>

Alternatively, you can use character codes:

&#123; = { &#125; = }

code source: https://ascii.cl/htmlcodes.htm

Upvotes: 1

Related Questions