How to add code snippet to Angular html template?

Question

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?

Flignats · Accepted Answer · 2019-11-16 20:32:40Z

1

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:

{ = { } = }

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

answered Nov 16, 2019 at 20:32

Flignats

1,27411 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joel Joseph · Accepted Answer · 2019-11-16 20:40:04Z

0

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>

answered Nov 16, 2019 at 20:40

Joel Joseph

6,1974 gold badges34 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to add code snippet to Angular html template?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related