youtube player in angular

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 component.ts of the page that I want the player to play I import the code:

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

the problem is that I want to use some events that 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 do I access attributes of this code in isolation? I already tried to give up but ... how can I create this player using typescript?

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