title: browser keeps making requests non-stop after I open home page
body: <p>I'm making a movie app to practice my mean stack skills and I just added a trailers and the data for this (videoID and thumbnail) I got from a youtube api. The template shows the thumbnail and when I click the thumbnail it opens a modal with the dynamically embedded youtube trailer. </p>
  
  <p>click event in template:</p>
  
  <pre><code>(click)="openModal(modal, trailerTitle.id)"
  </code></pre>
  
  <p>function in component:</p>
  
  <pre><code>openModal(modal, id){
          this.embedLink = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + id);
          modal.style.display = "block";
      }
  </code></pre>
  
  <p>I'm satisfied with how it works, if it wasn't for the fact that the browser keeps making the same requests over and over again. It's like it's refreshing the page over and over again. I noticed it only stops after I navigate to another page or when I close the modal after opening it. </p>
  
  <p>I don't see why it does this. Do you guys have any idea?</p>
  
  <p><strong>The requests to the server it keeps doing over and over again</strong></p>
  
  <pre><code>GET /app/getCounts 304 1.934 ms - -
  entered
  part=snippet&amp;q=The%20Shape%20of%20Water%20official&amp;key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&amp;maxResults=1&amp;order=relevance&amp;type=video
  GET /null 304 4.612 ms - -
  GET /cinema/getLatestMovie 304 7.601 ms - -
  GET /null 304 1.233 ms - -
  GET /stylesheets/style.css 304 1.270 ms - -
  GET /js/app/bundle.js 304 1.731 ms - -
  GET /movies/getTrailers 304 623.740 ms - -
  GET /app/getCounts 304 3.437 ms - -
  entered
  part=snippet&amp;q=The%20Shape%20of%20Water%20official&amp;key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&amp;maxResults=1&amp;order=relevance&amp;type=video
  GET /null 304 3.411 ms - -
  GET /cinema/getLatestMovie 304 10.370 ms - -
  GET /null 304 1.126 ms - -
  GET /stylesheets/style.css 304 0.434 ms - -
  GET /js/app/bundle.js 304 1.038 ms - -
  GET /movies/getTrailers 304 559.484 ms - -
  GET /app/getCounts 304 2.537 ms - -
  entered
  part=snippet&amp;q=The%20Shape%20of%20Water%20official&amp;key=AIzaSyD4shfocwn-Ed3Feuoo9fG3d2K2GjHmKeI&amp;maxResults=1&amp;order=relevance&amp;type=video
  GET /null 304 3.593 ms - -
  GET /cinema/getLatestMovie 304 10.254 ms - -
  GET /null 304 1.080 ms - -
  GET /stylesheets/style.css 304 0.491 ms - -
  GET /js/app/bundle.js 304 0.900 ms - -
  GET /movies/getTrailers 304 573.904 ms - -
  </code></pre>
  
  <p><strong>my home component template file: the modal is at the bottom with the iframe element where I insert the dynamic URL</strong></p>
  
  <pre><code>&lt;div class="col-md-8 col-md-offset-2"&gt;
  &lt;h5&gt;Welcome to MovieMeter! &lt;span *ngIf="isLoggedIn"&gt; You are logged in as {{fullName}}&lt;/span&gt;&lt;/h5&gt;
      &lt;br&gt;
          &lt;h3&gt;Trailers:&lt;/h3&gt;
          &lt;hr&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let trailer of trailers"&gt;
                  &lt;img src="{{trailer.body.items[0].snippet.thumbnails.high.url}}" alt="nope"&gt;
                  &lt;div id="{{trailer.body.items[0].id.videoId}}" #trailerTitle (click)="openModal(modal, trailerTitle.id)" class="trailerTitle"&gt;&lt;h5&gt;{{trailer.movie.title}}&lt;/h5&gt;&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;app-cinema-featured&gt;&lt;/app-cinema-featured&gt;
  &lt;/div&gt;
  
  
  &lt;!-- The Modal --&gt;
  &lt;div #modal id="myModal" class="modal"&gt;
  
      &lt;!-- Modal content --&gt;
      &lt;div #modalContent class="modal-content"&gt;
          &lt;span (click)="closeModal(modal)" class="close"&gt;&amp;times;&lt;/span&gt;
          &lt;iframe width="560" height="315" [src]="embedLink" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>the home component</strong></p>
  
  <pre><code>import {Component, OnInit} from "@angular/core";
  import {AuthService} from "../auth/auth.service";
  import {MovieService} from "../movie/movie.service";
  import {DomSanitizer, SafeResourceUrl,} from '@angular/platform-browser';
  
  
  @Component({
      styleUrls: ['./home.component.css'],
      selector: 'app-home',
      templateUrl: './home.component.html'
  })
  export class HomeComponent implements OnInit {
  
      isLoggedIn:Boolean;
      fullName;
      trailers;
      embedLink;
      subscription;
  
  
      constructor(public sanitizer: DomSanitizer, private authService: AuthService, private movieService: MovieService){}
  
      ngOnInit(){
  
          if (localStorage.getItem('token') !== null || undefined){
              this.isLoggedIn = true;
              this.fullName = localStorage.getItem('fullName');
          }
          // get the thumbnails and links of the three most recent movie trailers via the youtube API
          this.subscription = this.movieService.getTrailers()
              .subscribe(trailers =&gt; {
                  this.trailers = trailers.result;
                  console.log(this.trailers);
                  this.subscription.unsubscribe();
              })
      }
  
      // add the 'click outside modal to close the modal functions later."
      openModal(modal, id){
          this.embedLink = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + id);
          modal.style.display = "block";
      }
  
      closeModal(modal){
          modal.style.display = "none";
      }
  }
  </code></pre>