You can npm install web-component-disqus in your local project and add it to the head of the index.html file like so:
<script src="node_modules/web-component-disqus/dist/disqus.js"></script>or just add it from UNPKG with local installation required:
<script src="https://unpkg.com/web-component-disqus@0.0.3/dist/disqus.js"></script>When creating a Comment Count just add the shortname and config object from a JavaScript
For example. From this code:
var myShortName = 'MyDisqusShortname';
var myConfigObject = {
identifier: '/path/to/whenever',
url: 'http://home.myurl'
} <comment-count shortname="myShortname" config="myConfigObject">
<p>Comments</p>
</comment-count>If on the same page you can just reuse the variable and object used above
<discussion-embed shortname="myShortname" config="myConfigObject" />Basic Usage:
<head>
<script src="https://unpkg.com/web-component-disqus@0.0.1/dist/disqus.js"></script>
</head>
<body>
<div id='disqus-commentary'>
<comment-count shortname="shortname" config="disqus()">
<p>Comments</p>
</comment-count>
<discussion-embed shortname="shortname" config="disqus()" />
</div>
<script>
var shortname = 'myDisqusShortName';
function disqus() {
return {
config: {
url: `http://home.myurl`,
identifier: `path/to/document`
}
}
}
</script>
</body>Use the installation described above.
After choosing a component open the my-component.module.ts. Import the CUSTOM_ELEMENTS_SCHEMA from the '@angular/core' 'package.
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: MyComponentPage
}
])
],
declarations: [MyComponentPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyComponentModule { }Now on a MyComponent.page.ts
...
export class HomePage implements OnInit {
myShortName = 'shortname';
myConfig = {
identifier: 'path/to/whenever',
url: 'http://home.myurl'
};
constructor() { }
...
}And on the MyComponent.page.ts
<discussion-embed shortname="myShortName" config="myConfig"></discussion-embed>