Include KaiAds in Angular

kai-ads.service.ts

import { Injectable } from '@angular/core';
import * as kaiAds from '../../../assets/js/kaiads.min.js'

@Injectable({
  providedIn: 'root'
})
export class KaiAdsService {

  publisherId: string = 'XXXXXX'
  testing: false

  constructor() {
  }

  getFullscreenAd() {
    kaiAds.getKaiAd({
      publisher: this.publisherId,
      test: this.testing,
      timeout: 5000,
      // app: 'yourAppName', // TODO: for analytics
      // slot: 'yourSlotName', // TODO: for analytics
      onerror: err => console.error('Custom catch:', err),
      onready: ad => {
        console.log("Fullscreen Ad is ready to be displayed, testing: " + this.testing)

        // calling 'display' will display the ad
        ad.call('display')
      }
    }
    )
  }

  getResponsiveAd(containerId: string, tabindex: number, navClass: string) {
    kaiAds.getKaiAd({
      publisher: this.publisherId,
      test: this.testing,
      // app: 'yourAppName',
      // slot: 'yourSlotName',

      // Max supported size is 240x264
      h: 264,
      w: 240,

      container: document.getElementById(containerId),

      onerror: err => console.error('Custom catch:', err),
      onready: ad => {
        console.log("Ad is ready to be displayed, testing: " + this.testing)
        // Ad is resolved, loaded, and is ready to be displayed
        // calling 'display' will display the ad
        ad.call('display', {
          // In KaiOS the app developer is responsible
          // for user navigation, and as such can provide
          // navigational className and/or a tabindex
          tabindex: tabindex,

          // if the application is using
          // a classname to navigate
          // this classname will be applied
          // to the container
          navClass: navClass,

          // display style will be applied
          // to the container block or inline-block
          display: 'block',
        })
      }
    })

  }
}