Angularアプリケーションでは、カスタムJavaScriptコードを統合するための2つのオプションがあります。

ページのどこにでもコードを埋め込むオプション これは馴染みのあるオプションで、最も簡単な方法です。したがって、AngularファイルのいずれかのHTMLにアクセスし、EmbedSocialコードを直接貼り付けることができます。

以下に例を示します：

1.コンポーネントの作成

これを実現するには、2つのステップを守る必要があります。

コンポーネントの作成

コンポーネントの使用

2.ターミナルで、次のコマンド ng generate component EmbedSocialWidget を使用して、EmbedSocialWidget という名前のAngularコンポーネントを作成します。

3.コンポーネントが作成されたら、EmbedSocialWidget.component.ts を開き、コンストラクタの直前に @Input() デコレートされた string として refId という名前を付け加えます。

4.同じファイル内で、ngOnInit() 関数の内部に、ウィジェットを構築する責任があるembedsocial javascriptを追加します。

あなたのコンポーネントファイル EmbedSocialWidget.component.ts は、以下の画像のようになるはずです：

コンポーネントの使用

まず、EmbedSocialアカウントにログインし、ウィジェットに移動します。埋め込みたいウィジェットの1つを開き、EmbedSocialデータ-ref属性の値（上記で説明したように）を取得します。

データ-ref属性は次のようになります：

データ-refを取得したら、新しく作成した EmbedSocialWidget コンポーネントをAngularプロジェクト内のどこでも自由に使用できます。コンポーネントの refId バインディングを、EmbedSocialからコピーしたrefIdで編集してください。

以下はコンポーネントを使用する例です：

以上です。