CODEWITHSUNDEEP
angularangular-compiler
Stepan Suvorov
Stepan Suvorov

Reputation: 26176

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

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'}}

Upvotes: 1

Views: 353

Answers (3)

diopside
diopside

Reputation: 3062

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.

Upvotes: 1

Pac0
Pac0

Reputation: 23149

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

Upvotes: 0

Mozgor
Mozgor

Reputation: 204

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.

Upvotes: 1

Related Questions