CODEWITHSUNDEEP
javascriptangular
Kiran Dash
Kiran Dash

Reputation: 4956

Angular Property Binding or Interpolation

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.

Upvotes: 0

Views: 627

Answers (2)

Kristian
Kristian

Reputation: 501

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.

Upvotes: 1

Dipak
Dipak

Reputation: 2308

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"};
});

Upvotes: 1

Related Questions