akveo-services-banner.component.ts

import { Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core';
import { NB_DOCUMENT, NB_WINDOW } from '@commudle/theme';

@Component({
  selector: 'ngd-akveo-services-banner',
  template: `
    <span #wrapper class="hs-cta-wrapper" id="hs-cta-wrapper-{{ ctaId }}">
      <span class="hs-cta-node hs-cta-{{ ctaId }}" id="hs-cta-{{ ctaId }}">
        <a href="https://cta-redirect.hubspot.com/cta/redirect/2452262/{{ ctaId }}" target="_blank">
          <img
            class="hs-cta-img"
            id="hs-cta-img-{{ ctaId }}"
            [height]="height"
            [width]="width"
            src="https://no-cache.hubspot.com/cta/default/2452262/{{ ctaId }}.png"
            alt="Services on Angular"
          />
        </a>
      </span>
    </span>
  `,
  styleUrls: ['akveo-services-banner.component.scss'],
})
export class AkveoServicesBanner implements OnInit {
  @Input() ctaId: string;

  @Input() width: string;

  @Input() height: string;

  @ViewChild('wrapper', { static: true }) wrapper: ElementRef;

  constructor(private host: ElementRef, @Inject(NB_DOCUMENT) private document, @Inject(NB_WINDOW) private window) {}

  ngOnInit() {
    if (this.window?.hbspt?.cta?.load) {
      this.loadCta();
    } else {
      this.loadHubSpotCtaScript();
    }
  }

  private loadCta() {
    this.window.hbspt.cta.load(2452262, this.ctaId, {});
  }

  private loadHubSpotCtaScript() {
    this.wrapper.nativeElement.appendChild(
      this.document
        .createRange()
        .createContextualFragment(`<script type="text/javascript" src="https://js.hscta.net/cta/current.js"></script>`),
    );
    this.wrapper.nativeElement.querySelector('script').onload = this.loadCta.bind(this);
  }
}