title: How to bypassSecurityTrustResourceUrl for each element in an array?
body: <p>I have an array of Google Map Embed API URLs. However, when iterating over each item and binding them to the source of an iFrame.</p>
  
  <p>I could use the following.</p>
  
  <pre><code>constructor(private sanitizer: DomSanitizationService) {
      this.url = sanitizer.bypassSecurityTrustResourceUrl('https://www.google.com/maps/embed/v1/place?key=KEY&amp;q=365 Badger Ave, Newark, New Jersey 07112');
  }
  </code></pre>
  
  <p>But, I would have to do this for each item and I can't do so since I receive the array from an external source that updates.</p>
  
  <p>How could I bypass the security for each of my URLs?</p>
  
  <p>Here's app.component.ts</p>
  
  <pre><code>import { Component, Pipe } from '@angular/core';
  import { DomSanitizationService } from '@angular/platform-browser';
  @Pipe({name: 'secureUrl'})
  export class Url {
  
    constructor(private sanitizer:DomSanitizationService){
      this.sanitizer = sanitizer;
    }
  
    transform(url) {
          return this.sanitizer.bypassSecurityTrustResourceUrl(url).changingThisBreaksApplicationSecurity;            
    }
  }
  @Component({
    selector: 'my-app',
    pipes: [Url],
    template: `
      &lt;div class="container"&gt;
        &lt;div style="padding-top: 20px"&gt;
          &lt;div class="row" *ngFor="let row of rows"&gt;
              &lt;div *ngFor="let event of row"&gt;
                  &lt;div class="col s12 m6 l4"&gt;
                      &lt;div class="card hoverable"&gt;
                        &lt;div class="card-image waves-effect waves-block waves-light"&gt;
                          &lt;img height="300" class="activator" [src]="event.thumbnail"&gt;
                        &lt;/div&gt;
                        &lt;div class="card-content"&gt;
                          &lt;span class="card-title activator grey-text text-darken-4"&gt;{{event.title}}&lt;/span&gt;
                          &lt;p&gt;&lt;a class="activator"&gt;Hosted by {{event.host.data.first_name}} {{event.host.data.last_name}}&lt;/a&gt;&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class="card-action grey lighten-2"&gt;
                          &lt;a class="blue-grey-text lighten-3"&gt;Details&lt;/a&gt;
                          &lt;a class="blue-grey-text lighten-3"&gt;Join&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="card-reveal" style="font-size: 15px"&gt;
                        &lt;span class="card-title grey-text text-darken-4"&gt;&lt;center&gt;{{event.title}}&lt;/center&gt;&lt;i class="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt;
                        &lt;hr&gt;
                        &lt;center&gt;
                          &lt;p class="truncate"&gt;{{event.description}}&lt;/p&gt;
                          &lt;hr&gt;
                          &lt;p&gt;Starts {{event.start}}&lt;/p&gt;
                          &lt;iframe width="210" height="190" frameborder="0" style="border:0" src="{{event.address|secureUrl}}" allowfullscreen&gt;&lt;/iframe&gt;
                        &lt;/center&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  `
  })
  export class AppComponent {
      public rows = GROUPS;
  }
  var EVENTS = [
    {
      id: 95,
      title: "Event Name",
      description: "The awesome event description",
      thumbnail: "https://ucarecdn.com/58955d6b-bd4c-41f3-8a7b-4ce2bf013b13/IMG_4229.JPG",
      access: "public",
      code: null,
      start: "1 week ago",
      end: "6 days ago",
      address: "https://www.google.com/maps/embed/v1/place?key=KEY",
      host: {
        data: {
          id: 23,
          avatar: "http://www.gravatar.com/avatar/9e557072ab393aa2fca6701eb7b23853?s=45&amp;d=mm"
        }
      },
      category: {
        data: {
          id: 1,
          title: "Wedding",
          description: "A marriage ceremony."
        }
      }
    }
  ];
  
  var chunk_size = 3;
  const GROUPS = EVENTS.map(function(e,i){
      return i%chunk_size===0 ? EVENTS.slice(i,i+chunk_size) : null;
  })
  .filter(x=&gt;!!x)
  </code></pre>