Angular Disqus Module
Add Disqus to your app instantly!
Installation
NPM
$ npm install -S ngx-disqusYARN
$ yarn add ngx-disqusUsage
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
identifierinput to work properly on your app - For examplev if the page URL is
localhost:4200/aboutthen 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
