feat(youtube-player): add feature for waiting until the API has finished loading (#16998)

Author: Nathan Tate

src/dev-app/youtube-player/youtube-player-demo.html

@@ -10,7 +10,6 @@ <h1>Basic Example</h1>
         <mat-radio-button [value]="undefined">Unset</mat-radio-button>
       </mat-radio-group>
     </div>
-    <p *ngIf="!apiLoaded">Loading youtube api...</p>
-    <youtube-player *ngIf="apiLoaded" [videoId]="video && video.id"></youtube-player>
+    <youtube-player [videoId]="video && video.id"></youtube-player>
   </section>
 </div>

src/dev-app/youtube-player/youtube-player-demo.ts

@@ -6,14 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- import {ChangeDetectorRef, Component} from '@angular/core';
-
-declare global {
-  interface Window {
-    YT: typeof YT | undefined;
-    onYouTubeIframeAPIReady: () => void;
-  }
-}
+ import {Component} from '@angular/core';
 
 interface Video {
   id: string;
@@ -45,16 +38,4 @@ export class YouTubePlayerDemo {
   video: Video | undefined = VIDEOS[0];
   videos = VIDEOS;
   apiLoaded = false;
-
-  constructor(private _ref: ChangeDetectorRef) {
-    if (window.YT) {
-      this.apiLoaded = true;
-      return;
-    }
-
-    window.onYouTubeIframeAPIReady = () => {
-      this.apiLoaded = true;
-      this._ref.detectChanges();
-    };
-  }
 }