In Angular applications, there are two options for integrating custom JavaScript code.

One option is to embed the code directly into the HTML, and the other best solution is to create a Component.

This is a familiar option and the easiest way to go. So you can just access the html on any of your Angular files and paste the EmbedSocial code directly.

Here's an example:

2. Creating a Component

There are two steps you need to follow to achieve this:

1. In the terminal, use the following command `ng generate component EmbedSocialWidget` to create an angular component called `EmbedSocialWidget`

2. After the component is created, open `EmbedSocialWidget.component.ts` and add an `@Input() decorated` string called `refId` just above the constructor.

3. In that same file, inside the `ngOnInit()` function, add the embedsocial javascript, which is responsible for building the widget.

Your component file `EmbedSocialWidget.component.ts` should look like the image below:

Using the component

First, login to your EmbedSocial account and go to Widgets. Open one of the widgets that you want to embed and get the EmbedSocial data-ref attribute value (as mentioned above).

The data-ref attribute should look like this:

Once you have the data-ref, you can use the newly created `EmbedSocialWidget` component freely anywhere within your angular project. Just edit the component’s `refId` binding with the refId you copied from EmbedSocial before.

Here is an example of using the component:

That's it.