Angular

Add the Angstroma widget to an Angular application via src/index.html.

Script tag

Open src/index.html and paste before </body>:

src/index.html

    <script
      src="https://cdn.angstroma.com/widget-v1e53f7da.js"
      integrity="sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi"
      crossorigin="anonymous"
      data-key="ang_live_YOUR_KEY"
      async
    ></script>
  </body>
</html>

Using environment configuration

Store the key in your Angular environment file:

src/environments/environment.ts

export const environment = {
  production: false,
  angstromaKey: 'ang_live_YOUR_KEY',
};

Then inject it in your root component or AppComponent:

src/app/app.component.ts

import { Component, OnInit, Renderer2 } from '@angular/core'
import { environment } from '../environments/environment'

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent implements OnInit {
  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    const script = this.renderer.createElement('script')
    script.src = 'https://cdn.angstroma.com/widget-v1e53f7da.js'
    script.integrity = 'sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi'
    script.crossOrigin = 'anonymous'
    script.setAttribute('data-key', environment.angstromaKey)
    script.async = true
    this.renderer.appendChild(document.body, script)
  }
}