ng2-comment
v0.0.9
Published
Comment Module in Angular 2 for Anonymous User
Downloads
12
Maintainers
mohankumarannaReadme
ng2-comment
A Comment module for Anonymous User, developed in Angular 2 Typescript with Math Captcha.
Features
- Anonymous user can post a message.
- Math Captcha to identify human user.
- Comments and Replies in tree structure
- Links for Upvotes and Downvotes
- Pagination
Demo
Here is the demo.
Installation
Assumptions:
- An Angular 2 application is already available/installed. (if not, ng2-comment-demo application may be installed).
- Server side coding is already available/installed. (if not, a server side code available in backend folder of ng2-comment-demo application may be used. Server side code is developed on nodejs and mongodb)
Step 1:
npm install ng2-comment --save
Step 2:
In an application module, say app.module.ts, ensure following entries:
...
import { HttpModule } from '@angular/http';
import { CommentModule } from 'ng2-comment';
...
@NgModule ({
...
imports: [
...
HttpModule,
CommentModule,
...
],
...
}) Step 3:
Comment module needs to know, server address to save/retrieve comments. Such input is made through a config object. To avoid 'config' name collision with other such names in the application, an opaque token is used.
In a component file, say app.component.ts, ensure following entries:
import { OpaqueToken, Inject } from '@angular/core';
...
const APP_CONFIG_DATA = {
server_ip_addr: 'http://localhost:9090'
}
const APP_CONFIG_TOKEN = new OpaqueToken('config');
...
@Component ({
...
templateUrl: './app.component.html',
...
providers: [
{ provide: APP_CONFIG_TOKEN, useValue: APP_CONFIG_DATA }
],
...
})
export class AppComponent {
...
constructor( @Inject(APP_CONFIG_TOKEN) public config: OpaqueToken) {}
...
} Step 4:
In the template file app.component.html, ensure following entry:
...
<div class="col-xs-6 col-xs-offset-3">
<comment [config]=config></comment>
</div>
... Step 5:
In the application's index.html file, include link to bootstrap css as ng2-comment uses it.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/ bootstrap.min.css">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html> Step 6:
Run the server and client. If ng2-comment-demo is installed, open a terminal to run server: npm run server, it runs at port 9090. Open another terminal to run client, npm start (ie. ng2-comment-demo), which runs at port 8080.
Step 7: Open browser at url, say http://localhost:8080. It shows the Comment Form with list of comments.
License
MIT