All Collections
Display reviews
How to Embed Code in a Angular Application
How to Embed Code in a Angular Application

Steps on how you can embed the EmbedSocial Widget Code in a Angular Application.

Laze Trajkov avatar
Written by Laze Trajkov
Updated over a week ago

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.

  1. Embedding code anywhere on 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:


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.

Hope this was helpful, and if you have questions or need assistance feel free to reach out to:

Did this answer your question?