youtubeplayer at the angle

Question

Hello, I’m trying to implement a youtube player using angular 4, but I’m only able to create it using javascript code. Follow the code:

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      setTimeout( 
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      },3000);

and in the.ts component of the page I want the player to execute I import the code:

import '../../apiyoutube.js';

the problem is that I want to use several events I want to recover from the database and etc, so I wanted to manipulate the attributes of this code in services and in the component that use typescript. How can I access attributes of this code alone? I’ve tried to give up but... has how to create this player using typescript?

Obs: I put a setTimeOut because this way I imported the angular first executes the code. js and then render html, and the code could not access the id in the html page