Ngx-disqus NPM

Add Disqus to your app instantly!

Installation

npm i ngx-disqus

Usage

Set the Disqus shortname which is the unique identifier for your website as registered on Disqus

import { DISQUS_SHORTNAME } from 'ngx-disqus';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: DISQUS_SHORTNAME,
      useValue: 'disqus_shortname'
    },
  ]
}

Now you can use the Disqus component

import { DisqusModule } from 'ngx-disqus';

@Component({
  standalone: true,
  imports: [DisqusModule],
  selector: 'single-post',
  template: `<disqus [identifier]="pageId"></disqus>`
})
export class SinglePostComponent {
  pageId: string = '/post/123';
}

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

Here is a stackblitz

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>