In Angular applications there are two options when embedding custom javascript code.

One option is to embed the code directly in the html, and the other better solution is by creating a Component.

1. Embedding code anywhere in the page

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:

  • Create the component

  • Use the component

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:

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

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's an example of using the component:

That's it.

Hope this was helpful, and if you have questions or need assistance feel free to reach out and chat with us.

We're happy to help :)

Did this answer your question?