Angular Property Binding or Interpolation

Question

I am having trouble understanding property binding with interpolation.

The below code is the correct way to assign src for an iframe.

<iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(video.url)' frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

But I would like to concatenate url straight ahead with id. I manage to write the code below but I am sure it is wrong.

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl("' + https://www.youtube.com/watch?v=' + '"video.id)" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

So can any one guide on how to concatenate strings during binding and interpolation? Also some explanation or link to any guide will be much appreciated.

Possible duplicate of [How to set iframe src in Angular 2 without causing \`unsafe value\` exception?](https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception) — rrd, Jan 23 '18 at 14:23
@rrd thanks for the URL. That helps. but my question here is about how to use a string and a variable while using property binding. — Kiran Dash, Jan 23 '18 at 14:26
you should format your url code such a way that you should not add new text othewise this is know behaviour of — Dipak, Jan 23 '18 at 14:27
@Dipakchavda So your suggestion is to feed the entire url to the sanitize function instead of creating the URL inside it? — Kiran Dash, Jan 23 '18 at 14:29
@KiranDash Please review my answer it will probably helpful to you. — Dipak, Jan 23 '18 at 14:43

Kristian · Accepted Answer · 2018-01-25T08:50:22.837

1

First

I believe you have just added more quotation marks than necessary. I think that this should work better:

<iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/watch?v=' + video.id)"></iframe>

Second

I would not recommend sanitizing the input directly inline. I suggest you use component inner logic to sanitize your insecure data. Build the url completaly within some inner function of your component, the odds well might be you would not need the sanitizer at all then.

edited Jan 25 '18 at 08:50

answered Jan 23 '18 at 14:28

Kristian

501
2
13

Thanks for the info. I understand now. But I am still facing some issue: the iframe keeps reloading when I use interpolation but it just works fine without it. I will keep digging to find an alternate solution. – Kiran Dash Jan 23 '18 at 14:37
@KiranDash - I guess that depends on the life cycle of the component ... if you do not change the value dynamically, but you refresh the component somehow, the binding process would be triggered with every refresh ... hence it is better to not bind it with interpolation like [attr]=value but rather just assing it attr="value" ... the [] interpolation binding is ideal for dynamically changed values see the docs at https://angular.io/guide/template-syntax – Kristian Jan 23 '18 at 14:43
thanks for nice explanation. So I there a way to call the sanitizer function and use the interpolation inline without using databinding? Or do I need to just create the URL outside and then use it in src? – Kiran Dash Jan 23 '18 at 14:53
@KiranDash - It is much more convenient to declare some variable within you component.ts file and assing the url value to it, then you use that variable as a reference within your template. – Kristian Jan 23 '18 at 14:56
1

thanks for the suggestion. I ended up doing that. Have a good one. :) – Kiran Dash Jan 23 '18 at 14:57

score 1 · Answer 2 · answered Jan 23 '18 at 14:42

Please review following working code and review plunkr as well.

https://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

index.html

    <!DOCTYPE html>
    <html ng-app="plunker">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-sanitize.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div ng-controller="MainCtrl">
            <p>{{movie.src}}</p>
            <iframe ng-src="{{trustSrc(movie.src)}}"></iframe>
        </div>
    </body>
    </html>

app.js

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.movie = {src:"https://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

Angular Property Binding or Interpolation

2 Answers2