hypercomments for angular 2+

hyper-comments.component.ts

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

declare global {
	interface Window {
		_hcwp: any;
	}
}

@Component({
	selector: 'hyper-comments',
	template: `<div id="hypercomments_widget"></div>`
})
export class HyperCommentsComponent implements OnInit, OnDestroy {
	@Input() widgetId: number;

	constructor(
		private render: Renderer2,
		private el: ElementRef,
	) {}

	ngOnInit() {
		if (!this.widgetId) {return;}

		window._hcwp = window._hcwp || [];
		window._hcwp.push({widget: 'Stream', widget_id: this.widgetId, hc_disable: 1});

		if('HC_LOAD_INIT' in window) return;
		window['HC_LOAD_INIT'] = true;
		const lang = (navigator.language || navigator['systemLanguage'] || navigator['userLanguage'] || 'en').substr(0, 2).toLowerCase();

		const hcc = this.render.createElement('script');
		hcc.type = 'text/javascript';
		hcc.async = true;
		hcc.src = '//w.hypercomments.com/widget/hc/' + this.widgetId + '/' + lang + '/widget.js';
		this.render.appendChild(this.el.nativeElement, hcc);
	}

	ngOnDestroy() {
		if('HC_LOAD_INIT' in window) {
			delete window['HC_LOAD_INIT'];
		}
	}
}