CloudSponge Angular component

cloudsponge-contact-picker.component.ts

// Add the CloudSponge contact picker to your page and initialize it using this component.
// options are passed as a property to the component.
// You will still need to add a launch link to the page and a place to receive the selected contacts.
// For example:
//  <cs-contact-picker [key]="MY-CLOUDSPONGE-KEY" [options]="{}">
//    <label for="to">To: <a class="cloudsponge-launch">Pick from my contacts</a></label>
//    <textarea id="to" class="cloudsponge-contacts"></textarea>
//  </cs-contact-picker>
// Alternately, you may specify the options in your parent component:
//  import { CsContactPickerComponent } from './cs-contact-picker/cs-contact-picker.component';
//  CsContactPickerComponent.key = "MY-CLOUDSPONGE-KEY";
//  CsContactPickerComponent.options = {}
// See a working example here: https://stackblitz.com/edit/angular-r81skb

import { Component, OnInit, Input } from '@angular/core';

const addJavascript = function(u, id, callback) {
  // if the script already exists, just callback and return
  if (window['cloudsponge']) {
    callback && callback();
    return;
  }

  var a = document.createElement('script');
  a.async = true;
  a.src = u;
  if (id) {
    a.id = id;
  }

  if (callback) {
    a.onload = function() {
      callback();
    }
  }

  // add the script to the page
  const m = document.getElementsByTagName('script')[0];
  m.parentNode.insertBefore(a, m);
}

@Component({
  selector: 'cs-contact-picker',
  template: '<ng-content></ng-content>'
})
export class CsContactPickerComponent implements OnInit {
  @Input() options;
  @Input() key;

  constructor() { }

  ngOnInit() {
    this.key = this.key || CsContactPickerComponent['key'];
    Object.assign(this.options, CsContactPickerComponent['options']);
    addJavascript(`https://api.cloudsponge.com/widget/${this.key}.js`, "cloudsponge-contact-picker", function() {
      window['cloudsponge'] && window['cloudsponge'].init(this.options);
    }.bind(this));
  }
}