Ng2-comment NPM

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.