Angular Disqus Module

Add Disqus to your app instantly!

Installation

NPM

$ npm install -S ngx-disqus

YARN

$ yarn add ngx-disqus

Usage

Import DisqusModule in the root module

import { DisqusModule } from "ngx-disqus";
@NgModule({
  imports: [
    // ...
    DisqusModule.forRoot('disqus_shortname')
  ]
})

The paramter shortname is the unique identifier for your website as registered on Disqus, make sure it is defined in your module.

Now you can add Disqus component

@Component({
  selector: 'any-component',
  template: `<disqus [identifier]="pageId"></disqus>`
})
export class AnyComponent {

  pageId = '/about';
}

• Disqus component requires the identifier input to work properly on your app
• For examplev if the page URL is localhost:4200/about then the identifier should be /about.

Here is a stackblitz

Lazy load DisqusModule

If you wish to lazy load this library, set the shortname value in the root module using DISQUS_SHORTNAME token.

import { DISQUS_SHORTNAME } from 'ngx-disqus';

@NgModule({
  providers: [
    { provide: DISQUS_SHORTNAME, useValue: 'shortname_value' }
  ]
})
export class AppModule { }

And just import DisqusModule in the feature module

import { DisqusModule } from 'ngx-disqus';

@NgModule({
  imports: [
    DisqusModule
  ]
})
export class FeatureModule { }

More Options

See Disqus official documentation (JavaScript configuration variables) before using these inputs.

<disqus [identifier]="pageId" [url]="url" [category]="catId" [language]="'en'"
        (newComment)="onComment($event)" (ready)="onReady($event)" (paginate)="onPaginate($event)"></disqus>

NOTE

The HashLocationStrategy is not compatible with Disqus

For more info check DISQUS on ajax sites

Issues

If you identify any errors in this component, or have an idea for an improvement, please open an issue!

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

More plugins

• ngx-sharebuttons
• ngx-gallery
• ngx-progressbar
• ngx-scrollbar
• ngx-bar-rating
• ngx-disqus
• ngx-wordpress
• ngx-highlightjs
• ngx-teximate