# New embed and angular?

**URL:** <https://discuss.dev.twitch.com/t/new-embed-and-angular/26243>\
**Category:** API\
**Created:** [June 11, 2020, 4:13pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243 "2020-06-11T16:13:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JFM](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@JFM](https://discuss.dev.twitch.com/u/JFM)\
**Post date:** [June 11, 2020, 4:13pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243/1 "2020-06-11T16:13:39Z")

</div>

Any one know how to use the new embed with Javascript in a Angular 2+ application?  
I want to make the transitions from the iframe but it seems embed is now available on npm.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [June 11, 2020, 4:17pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243/2 "2020-06-11T16:17:44Z")

</div>

You can either update your iframe code to include the new parent argument.

Or using the JS method, it’s literally, just add a script to your header and call it in your html, you don’t need it to be a NPM module since the content is loaded from twitch’s CDN anyway. A whole module is overkill to what amounts to one `<script` tag and a couple of lines of js

> **[Video & Clips](https://dev.twitch.tv/docs/embed/video-and-clips/)**
>
> Embedding Video and Clips

---

<div class="post-metadata">

**Author:** ![JFM](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@JFM](https://discuss.dev.twitch.com/u/JFM)\
**Post date:** [June 11, 2020, 4:20pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243/3 "2020-06-11T16:20:32Z")

</div>

Script tags don’t work in the html of the components from what I have experienced so far, and I cant find a way to import the Twitch object without getting an error if I want to run it on the OnInit function

![Screenshot_39](https://d2opxh93rbxzdn.cloudfront.net/original/2X/5/5dc1422ef657e76839acb2d7d9044d8c4bbc50b5.png)

 ![Screenshot_37](https://d2opxh93rbxzdn.cloudfront.net/original/2X/9/905a05cd07238b60af105393e5973a6cec7476f9.png)

![Screenshot_38](https://d2opxh93rbxzdn.cloudfront.net/original/2X/6/6908581f2a3ba3c38d7d5735fcebd5c9fa00eaf3.png)

---

<div class="post-metadata">

**Author:** ![JFM](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@JFM](https://discuss.dev.twitch.com/u/JFM)\
**Post date:** [June 11, 2020, 4:39pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243/4 "2020-06-11T16:39:36Z")

</div>

Fixed: looks like i needed to declare this before the @Component

**declare let Twitch: any;**

---

<div class="post-metadata">

**Author:** ![WLG3R](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/wlg3r/32/6985_2.png) [@WLG3R](https://discuss.dev.twitch.com/u/WLG3R)\
**Post date:** [June 11, 2020, 6:19pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243/5 "2020-06-11T18:19:15Z")

</div>

Just in general, if you are doing any JS import from the index.html, you need to do that declare var PackageName:any in angular

---

<div class="post-metadata">

**Author:** ![system](https://d2opxh93rbxzdn.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://discuss.dev.twitch.com/u/system)\
**Post date:** [July 11, 2020, 6:19pm UTC](https://discuss.dev.twitch.com/t/new-embed-and-angular/26243/6 "2020-07-11T18:19:17Z")

</div>

Closed on July 11, 2020, 6:19pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.