Comment Module in Angular 2 for Anonymous User

Usage no npm install needed!

<script type="module">
  import ng2Comment from '';



A Comment module for Anonymous User, developed in Angular 2 Typescript with Math Captcha.


  1. Anonymous user can post a message.
  2. Math Captcha to identify human user.
  3. Comments and Replies in tree structure
  4. Links for Upvotes and Downvotes
  5. Pagination


Here is the demo.



  • 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: [  

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>  

Step 5: In the application's index.html file, include link to bootstrap css as ng2-comment uses it.

<!DOCTYPE html>  

    <link rel="stylesheet" href="	bootstrap.min.css">  

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.