Showing posts with label ngx-disqus. Show all posts
Showing posts with label ngx-disqus. Show all posts
<img src="" height="150" width="150"></img> <br> ngx-disqus


October 28, 2017
Add Disqus to your app instantly!



Install it with npm
 npm install --save ngx-disqus  


If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ngx-disqus:
 map: {  
  'ngx-disqus': 'node_modules/ngx-disqus/bundles/ngx-disqus.umd.js',  

Basic usage:

Import DisqusModule in the root module
 import { DisqusModule } from "ngx-disqus";  
  imports: [  
   // ...  
The function forRoot(shortname: string) tells the Disqus service your forum's shortname, which is the unique identifier for your website as registered on Disqus. If undefined, the Disqus embed will not load.

Now you can add Disqus 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 example If the page URL is localhost:4200/about then the identifier should be /about.

More Options:

See Disqus official documentation (JavaScript configuration variables) before using these inputs.
 <disqus [identifier]="pageId" [url]="url" [category]="catId" [lang]="'en'"  
     (onNewComment)="onComment($event)" (onReady)="onReady($event)" (onPaginate)="onPaginate($event)"></disqus>  


Angular router supports two LocationStrategy providers:
  • PathLocationStrategy: the default "HTML5 pushState" style. (Compatible with Disqus)
  • HashLocationStrategy: the "hash URL" style. (Incompatible with Disqus)
For more info check DISQUS on ajax sites

Note: Special thanks to Murhaf Sousli
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.