Is this the right way to embed Disqus in Angular2 component?

Question

Is the below done correctly to embed Disqus in Angular2 Component

disqus.component.html

<div class="card card-block">
  <div id="disqus_thread"></div>
  <noscript>
    Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a>
  </noscript>
</div>

--

disqus.component.ts

//Above code omitted for simplicity

    export class DisqusComponent {
      ngOnInit(){
        (function() { // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');

          s.src = '//blahblahblahdafsfawf.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      }
    }

Answer 1

Update: The easiest way is to use this DisqusModule that you can install from npm check Live Demo

If you still want to write it your self, this component will do the job

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


@Component({
    selector: 'disqus',
    template: '<div id="disqus_thread"></div>',
})

export class Disqus implements OnInit{

    @Input() public identifier:string;
    @Input() public shortname:string;

    constructor(private el:ElementRef, private renderer:Renderer2) {
      this.dom = el.nativeElement;
    }

    ngOnInit() {
      if ((<any>window).DISQUS === undefined) {
        this.addScriptTag();
      }
      else {
        this.reset();
      }
    }

    /**
     * Reset Disqus with new information.
     */
    reset() {
      (<any>window).DISQUS.reset({
        reload: true,
        config: this.getConfig()
      });
    }

    /**
     * Add the Disqus script to the document.
     */
    addScriptTag() {
       (<any>window).disqus_config = this.getConfig();

       let script = this.renderer.createElement(this.el.nativeElement, 'script');
       script.src = `//${this.shortname}.disqus.com/embed.js`;
       script.async = true;
       script.type = 'text/javascript';
       script.setAttribute('data-timestamp', new Date().getTime().toString());
     }

    /**
     * Get Disqus config
     */
    getConfig() {
      let _self = this;
      return function () {
        this.page.url = window.location.href;
        this.page.identifier = _self.identifier;
        this.language = 'en';
      };
    }
}

Answer 2

You can use the DISQUS.reset function to update the page details for a comment section without having to loading embed.js every time. That was you can just add the script once as Eric Martinez suggests.