Angular how can I use embed script in Component

You can create a script tag dynamically, but I think it's easier to just download the script and put it in assets folder and then add the script to script list in angular.json

or you can add the script to index.html head section

index.html

<head>
    <script src= "https://player.twitch.tv/js/embed/v1.js"></script>
    ...
</head>

add this to component ngOninit method

      ngOnInit() {
        var options = {
            width: <width>,
            height: <height>,
            channel: "<channel ID>",
            video: "<video ID>",
            collection: "<collection ID>",
          };
          var player = new Twitch.Player("<player div ID>", options);
          player.setVolume(0.5);
       }

Component template

    <div id="<player div ID>"></div>

You may find another solution like angular package for twitch can be more cleaner way

Updated

typescript will give an error like [ts] Cannot find name 'Twitch'. [2304] some library has type definition files but in our case if you use Twitch object in this file only you can add this statement to tell typescript about the Twitch object

declare const Twitch: any;

if you want to use Twitch on multiple components

src/global.d.ts

 declare const Twitch: any;

final recommendation

install npm i twitch-js and import Twitch object like this

import Twitch from 'twitch-js'

this will be bundled by webpack, so you don't need to add any script tag in the html.

twitch-devs

Tags:

Node.Js

Typescript

Twitch

Angular

Recent Posts