CODEWITHSUNDEEP
angular
Tim Liberty
Tim Liberty

Reputation: 2129

How do I escape curly braces in Angular

I have this in my HTML:

<iframe src="https://kart.1881.no/?direction={59.83006424|6.25588723|START}{{{latitude}}|{{longitude}}|M%C3%85L}"></iframe>

Notice {{{latitude}} - Here I want to escape the first {

I tried to put \{ but it not work as well.

The error is Missing expected : at the end of the expression

Upvotes: 3

Views: 11241

Answers (5)

null canvas
null canvas

Reputation: 10613

Use the + operator to concatenate the required SRC

[src]="...{' + {{latitude}}+ '}...'"

(Update: added brackets to src)

Upvotes: 0

dmoebius
dmoebius

Reputation: 994

Use the html entity &#x007B;

<iframe src="https://kart.1881.no/?direction={59.83006424|6.25588723|START}&#x007B;{{latitude}}|{{longitude}}|M%C3%85L}"></iframe>

Upvotes: 0

yurzui
yurzui

Reputation: 214047

view

<iframe [src]="'https://kart.1881.no/?direction={59.83006424|6.25588723|START}{' + latitude + '|' + longitude + '|M%C3%85L}' | safe"></iframe>

And the next pipe should help you

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

You can override interpolation like

template: `
    <iframe src="https://kart.1881.no/?direction={59.83006424|6.25588723|START}{[[latitude]]|[[longitude]]|M%C3%85L}"></iframe>
  `,
interpolation: ['[[', ']]']

but anyway you have to sanitize url that will work only with property(not interpolation) binding

Plunker Example

Upvotes: 1

user4676340
user4676340

Reputation:

Simply try 

{{'{' + latitude + '}'}}

Upvotes: 4

Agop
Agop

Reputation: 1917

You could try with %7B for { and %7D for }. Those are just the URI-encoded forms, which Angular shouldn't try to parse.

Upvotes: 3

Related Questions