Angular and <code> HTML

Question

I wonder how can I achieve my goal in a clean way. Here's the problem: In my angular view I want to have the following code block to explain to my customers how to set up an embeded plugin

In angular(5.X) view

  <code>
    <script src="https://plugin.example.io"></script>
    <script>
      const myBot = new Bot({{ uid }}) // Here I want to inject the `uid` var coming from my angular controller
    </script>
  </code>

Of course I don't want the code to be interpreted but just displayed as a code block should do.

Problem is that angular sanitizes view before rendering it to avoid security issues. However I thought of sanitizer.bypassSecurityTrustHtml() but problem is how to inject my uid and remains the code clean ?

Is there any known directive that can make the trick ?

Thank you.

Rather than use literal carets, < you can use the html entity <: <script src=""></script> — Explosion Pills
– Explosion Pills, Commented Jan 30, 2018 at 15:14

Jeremy Thille · Accepted Answer · 2018-01-30 15:49:01Z

1

You can try and encode special HTML entities like :

<script src="https://plugin.example.io"></script>

will be rendered in the view as :

<script src="https://plugin.example.io"></script>

but not interpreted.

Edit

I guess even just the first characted should do the trick and prevent the whole thing from being interpreted.

<script src="https://plugin.example.io"></script>

edited Jan 30, 2018 at 15:49

answered Jan 30, 2018 at 15:16

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

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

2 Comments

Pierre Clocher Over a year ago

Not the most beautiful thing I ever done but works like a charm

Jeremy Thille Over a year ago

A man's gotta do what he's gotta do :) (Please mark the answer as correct if it solved your problem)

Collectives™ on Stack Overflow

Angular and <code> HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related