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'}}
As far as I know, you have two options :
• you want to display just simple pieces of code : you might be able to "escape" your double brackets by putting double quotes around it. If it doesn't work, you could still store your code example inside strings you would display with {{myPieceOfCodeToShow}}
• you want to provide more consequent snippet : the cleaner solution I know is to store those snippets in external text files and to load them as big strings.
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.
As far as I know, Angular has no special comment syntax for its templates.
You can use HTML comments, though it will not be very readable, even for your short example. Unfortunately if you comment, you want readability. And maybe not applicable to your cases.
You can see a related discussion here : https://github.com/angular/angular/issues/13514
You will have to document in another way.
EDIT :
Example here : Commenting (out) code in Angular2 TypeScript
