How to tell Angular not to compile some part of template?

Question

Practical case is pretty simple: I would like to provide documentation for my library that's for I want to paste examples of code there together with demo parts.

So my question is: How to make one part compilable and executable but other one - just a text (!with double curly brackets).

For example:

<angular-switchery [(ngModel)]="swticherModel"></angular-switchery>
Switcher: {{swticherModel? 'ON' : 'OFF'}}

Answer 1

See here: http://www.syntaxsuccess.com/viewarticle/ignoring-angular-2.0-bindings

You can use the ngOnBindable directive, or the DomSanitizer to sanitize the text before displaying.

<div ngNonBindable>{{10 * 10}}</div>

For the Dom Sanitizer, import the service

import { DomSanitizer } from '@angular/platform-browser'

inject it in constructor

constructor(private sanitizer: DomSanitizer) { 

Then wherever you need to inject text, use the bypassSecurityTrustHTML method.

this.sanitizer.bypassSecurityTrustHTML( your string here )

Many people turn the sanitizer into a pipe, so they can automatically sanitize strings in the template with ease, but I dunno if that would work for your use case.